JavaScript DHTML/GUI Components/Drag Drop — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:44, 26 мая 2010
Содержание
- 1 Crop an image
- 2 Display Drag Icon in drag and drop
- 3 Dragable float window with scrollable text inside
- 4 Dragable sorted list
- 5 Dragable transparent window
- 6 Drag and drop custom window with title bar
- 7 Drag and Drop - DDProxy
- 8 Drag and Drop: Multiple groups, targetable affordance
- 9 Drag and Drop to sort lists
- 10 Drag and Drop to sort slides
- 11 Dragged object is on top
- 12 Drag inside and outside a range
- 13 Drag Over Event: Drag and Drop the file over recycle bins
- 14 Drag still
- 15 Drag within a range 2
- 16 DynAPI Examples - Drag Drop /w Collision Detection
- 17 Yahoo! UI Library - Drag and Drop 1
- 18 Yahoo! UI Library - Drag and Drop 2
- 19 Yahoo! UI Library - Drag and Drop 3
- 20 Yahoo! UI Library - Drag and Drop 5
- 21 Yahoo! UI Library - Drag and Drop: Resize
Crop an image
/* dom-drag.js 09.25.2001 www.youngpup.net
10.28.2001 - fixed minor bug where events
sometimes fired off the handle, not the root.
*/
<html><head><title>- cropper -</title>
<style type="text/css">
<!--
html, body {
height:100%;
padding:0;
margin:0;
background:white;
font:11px verdana;
}
body {
margin:15px 40px;
}
#banner {
position:absolute;
top:0px; left:0px;
height:100%;
width:19px;
background:black url(http://youngpup.net/img/logo.gif) top left no-repeat;
}
h1 {
font:11px verdana;
font-weight:bold;
margin-top:0;
margin-bottom:1em;
color:#FB3B00;
}
#pbox {
width:300px; height:300px;
overflow:hidden;
}
.opacity{filter: alpha(opacity=60)}
-->
</style>
<script language="javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<script language="javascript">
var oThang, oHandle, reportBox, iReportCount = 0;
window.onload = function() {
if (document.all || document.getElementById)
{
oThang = document.all ? document.all["thang"] : document.getElementById("thang")
oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
oReport = document.all ? document.all["report"] : document.getElementById("report")
Drag.init(oHandle, oThang, -250, -50, -250, -50);
// report stuff
oThang.onDrag = function(x, y) { reportDrag("", x, y); }
}
function reportDrag(who, x, y) {
oReport.value = who + "" + " X = " + (x + 250) + " Y = " + (y + 250) + " W = 100 H = 100"
}
oThang.onDrag(-250, -250);
}
</script></head>
<body>
<div id="banner"></div>
<h1>DOM-Drag Examples: Cropper</h1>
<div style="width: 300px; height: 300px; overflow: hidden; top: 20px; left: 20px;">
<img src="snare_pic_large-300.jpg">
<div id="thang" style="position: absolute; left: -109px; top: -190px;">
<img class="opacity" style="position: absolute; left: 0px; top: 0px;" src="selection2.gif">
<img id="handle" style="position: absolute; left: 250px; top: 250px; width: 100px; height: 100px;" src="x.gif">
</div>
</div>
<input id="report" style="width: 300px;" type="text">
<p>this was <a href="http://www.styrofirm.ru/" target="_blank">jody"s</a> idea.</p>
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/Crop.zip">Crop.zip( 48 k)</a>
Display Drag Icon in drag and drop
<html>
<head>
<title>DynAPI Examples - Drag Icon</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
var icon = new DynLayer("<img src="./dynapiexamples/images/file.gif">",0,0,20,24);
icon.setMaximumSize(20,24);
dynapi.functions.getImage("./dynapiexamples/images/menu_side.gif");
var icon2 = new DynLayer(null,0,0,0,0,null,"./dynapiexamples/images/menu_side.gif");
// layer 1
var lyr = new DynLayer("Yellow Source",50,100,100,100,"yellow");
lyr.setDragIcon(icon);
lyr.setDragEnabled(true,null,true);
dynapi.document.addChild(lyr);
lyr._tag="yellow";
// layer 2
var lyr = new DynLayer("Lime Source",50,210,100,100,"lime");
lyr.setDragIcon(icon);
lyr.setDragEnabled(true,null,true);
dynapi.document.addChild(lyr,"layer2");
lyr._tag="lime";
// target
var lyr = new DynLayer("Target",250,100,300,210,"gold");
dynapi.document.addChild(lyr,"target");
lyr.addEventListener({
ondrop:function(e,dragIcon){
o = dragIcon.getDragSource();
alert("You"ve dropped the "+o._tag+" layer");
}
});
function changeIcon(){
dynapi.document.layer2.setDragIcon(icon2);
}
</script>
</head>
<body>
Drag and Drop the Yellow or Lime colored layers onto the Gold layer <br><br>
<a href="javascript:;" onclick="changeIcon()">Change Lime Source Drag Icon<a>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Dragable float window with scrollable text inside
/* CopyRight www.youngpup.net */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html><head>
<script language="javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<script language="javascript">
/* =======================================================
* ypSimpleScroll
* 3/11/2001
*
* http://www.yougnpup.net/
* ======================================================= */
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270) }
ypSimpleScroll.prototype.scrollWest = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast = function() { this.startScroll(0) }
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
if (this.loaded)
{
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.overrideScrollAngle(deg)
this.speed = speed ? speed : this.origSpeed
this.lastTime = (new Date()).getTime() - this.y.minRes
this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
}
}
ypSimpleScroll.prototype.endScroll = function() {
if (this.loaded)
{
window.clearTimeout(this.aniTimer)
this.aniTimer = 0;
this.speed = this.origSpeed
}
}
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
if (this.loaded)
{
deg = deg % 360
if (deg % 90 == 0) {
var cos = deg == 0 ? 1 : deg == 180 ? -1 : 0
var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
} else {
var angle = deg * Math.PI / 180
var cos = Math.cos(angle)
var sin = Math.sin(angle)
sin = -sin
}
this.fx = cos / (Math.abs(cos) + Math.abs(sin))
this.fy = sin / (Math.abs(cos) + Math.abs(sin))
this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
}
}
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
if (this.loaded) this.speed = speed
}
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
if (this.loaded)
{
if (stopH != this.scrollLeft || stopV != this.scrollTop) {
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.lastTime = (new Date()).getTime()
var dx = Math.abs(stopH - this.scrollLeft)
var dy = Math.abs(stopV - this.scrollTop)
var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
this.fx = (stopH - this.scrollLeft) / (dx + dy)
this.fy = (stopV - this.scrollTop) / (dx + dy)
this.stopH = stopH
this.stopV = stopV
this.speed = d / aniLen * 1000
window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
}
}
}
ypSimpleScroll.prototype.jumpTo = function(nx, ny) {
if (this.loaded)
{
nx = Math.min(Math.max(nx, 0), this.scrollW)
ny = Math.min(Math.max(ny, 0), this.scrollH)
this.scrollLeft = nx
this.scrollTop = ny
if (this.y.ns4)this.content.moveTo(-nx, -ny)
else {
this.content.style.left = -nx + "px"
this.content.style.top = -ny + "px"
}
}
}
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
ypSimpleScroll.prototype.scroll = function() {
this.aniTimer = window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
var nt = (new Date()).getTime()
var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
if (d > 0)
{
var nx = d * this.fx + this.scrollLeft
var ny = d * this.fy + this.scrollTop
var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
var yOut = (ny >= this.scrollTop && ny >= this.stopV) || (ny <= this.scrollTop && ny <= this.stopV)
if (nt - this.lastTime != 0 &&
((this.fx == 0 && this.fy == 0) ||
(this.fy == 0 && xOut) ||
(this.fx == 0 && yOut) ||
(this.fx != 0 && this.fy != 0 && xOut && yOut)))
{
this.jumpTo(this.stopH, this.stopV)
this.endScroll()
}
else {
this.jumpTo(nx, ny)
this.lastTime = nt
}
}
}
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
var y = this.y = ypSimpleScroll
if (!initLeft) initLeft = 0
if (!initTop) initTop = 0
if (!contentWidth) contentWidth = width
if (document.layers && !y.ns4) history.go(0)
if (y.ie || y.ns4 || y.dom) {
this.loaded = false
this.id = id
this.origSpeed = speed
this.aniTimer = false
this.op = ""
this.lastTime = 0
this.clipH = height
this.clipW = width
this.scrollTop = initTop
this.scrollLeft = initLeft
this.gRef = "ypSimpleScroll_"+id
eval(this.gRef+"=this")
var d = document
d.write("<style type="text/css">")
d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
d.write("#" + this.id + "Content { left:" + (-initLeft) + "px; top:" + (-initTop) + "px; width:" + contentWidth + "px; }")
d.write("</style>")
}
}
ypSimpleScroll.prototype.load = function() {
var d, lyrId1, lyrId2
d = document
lyrId1 = this.id + "Container"
lyrId2 = this.id + "Content"
this.container = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
this.content = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
this.docH = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
this.docW = Math.max(this.y.ns4 ? this.content.document.width : this.content.offsetWidth, this.clipW)
this.scrollH = this.docH - this.clipH
this.scrollW = this.docW - this.clipW
this.loaded = true
this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
this.scrollTop = Math.max(Math.min(this.scrollTop, this.scrollH),0)
this.jumpTo(this.scrollLeft, this.scrollTop)
}
</script>
<style type="text/css">
#root {
position:absolute;
height:100px;
width:150px;
background-color:#F4F4F4;
border:1px solid #333;
font-family:verdana, sans-serif;
font-size:10px;
}
#handle {
margin:2px;
padding:2px;
width:142px;
color:white;
background-color:navy;
cursor:default;
}
#thumb {
position:absolute;
height:25px;
width:11px;
background-color:#eee;
border:1px outset #eee;
}
p {
margin-top:0px;
margin-bottom:1em;
}
</style>
<script language="javascript">
var theHandle, theRoot, theThumb, theScroll;
var thumbTravel, ratio;
theScroll = new ypSimpleScroll("scroll", 2, 19, 128, 75);
window.onload = function() {
theHandle = document.getElementById("handle");
theRoot = document.getElementById("root");
theThumb = document.getElementById("thumb");
theScroll.load();
Drag.init(theHandle, theRoot);
Drag.init(theThumb, null, 135, 135, 19, 71);
// the number of pixels the thumb can travel vertically (max - min)
thumbTravel = theThumb.maxY - theThumb.minY;
// the ratio between scroller movement and thumbMovement
ratio = theScroll.scrollH / thumbTravel;
theThumb.onDrag = function(x, y) {
theScroll.jumpTo(null, Math.round((y - theThumb.minY) * ratio));
}
}
</script><style type="text/css">#scrollContainer { left:2px; top:19px; width:128px; height:75px; clip:rect(0 128 75 0); overflow:hidden; }#scrollContainer, #scrollContent { position:absolute; }#scrollContent { left:0px; top:0px; width:128px; }</style></head>
<body>
<div id="root" style="left: 20px; top: 20px;">
<div id="handle">Handle</div>
<div id="thumb" style="left: 135px; top: 19px;"></div>
<div id="scrollContainer">
<div style="left: 0px; top: 0px;" id="scrollContent">
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
veleum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</div>
</div>
</body></html>
Dragable sorted list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) --><title>Drag & Drop Sortable Lists with JavaScript and CSS</title>
<!-- common.css -->
<style rel="stylesheet" type="text/css" href="">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px 20px;
min-width: 30em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif;
margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
font-size: 22px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
color: #fff;
text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
border-style: solid;
border-color: #8760c1;
border-width: 1px 0px;
height: 19px;
}
.breadcrumb li.first {
border-left: 1px solid #8760c1;
}
.breadcrumb li {
float: left;
border-right: 1px solid #8760c1;
padding: 3px 10px;
}
.breadcrumb li a {
display: block;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
h1, .breadcrumb {
font-family: Skia;
background-color: #ccaaff;
margin-left: -20px;
margin-right: -20px;
}
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
max-width: 40em;
}
li p {
margin-bottom: 0.75em;
}
br.clear {
clear: both;
margin: 0px;
}
.sidebar {
margin: 0px 10px 30px 30px;
clear: right;
float: right;
width: 134px;
border: 1px solid #8760c1;
background-color: #ccaaff;
padding: 5px;
font-size: 11px;
font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
text-align: left;
}
.sidebar ul {
margin: 0px;
margin-left: 1.5em;
padding: 0px;
list-style-type: circle;
}
td.caption {
font-size: 12px;
text-align: center;
}
#copyright {
margin-bottom: 1em;
text-align: center;
font-size: 11px;
}
blockquote {
font-size: 13px;
font-style: italic;
}
blockquote .attribution {
font-weight: normal;
font-style: normal;
text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }
</style>
<!-- lists.css -->
<style rel="stylesheet" type="text/css" href="">
ul.sortable li {
position: relative;
}
ul.boxy {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 10em;
font-size: 13px;
font-family: Arial, sans-serif;
}
ul.boxy li {
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}
.clickable a {
display: block;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.clickable li:hover {
background-color: #f6f6f6;
}
</style>
<style type="text/css"><!--
.statusbox {
font-size: 13px;
font-family: Monaco, monospace;
width: 15em;
}
ul.boxy li { margin: 0px; }
#phonetics td {
margin: 0px;
padding: 0px 1em;
vertical-align: top;
width: 100px;
}
#phonetic1 li, #phonetic2 li, #phonetic3 li { margin: 0px; }
#phonetic2 li {
margin-bottom: 4px;
}
#phonetic3 { margin-top: -4px; }
#phonetic3 li { margin-top: 4px; }
#phoneticlong {
margin-bottom: 1em;
}
#phoneticlong li, #buttons li {
margin-bottom: 0px;
margin-top: 4px;
}
#boxes {
font-family: Arial, sans-serif;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 300px;
}
#boxes li {
cursor: move;
position: relative;
float: left;
margin: 2px 2px 0px 0px;
width: 33px;
height: 28px;
border: 1px solid #000;
text-align: center;
padding-top: 5px;
background-color: #eeeeff;
}
#twolists td {
width: 300px;
vertical-align: top;
}
#twolists1 li {
font-family: sans-serif;
}
#twolists2 {
border: 1px dashed #fff;
}
#twolists2 li {
font-family: serif;
background-color: #eedddd;
}
.inspector {
font-size: 11px;
}
//-->
</style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
}
</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
}
</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
// TODO: write unit tests
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners["draginit"] = new Array()
this._listeners["dragstart"] = new Array()
this._listeners["dragmove"] = new Array()
this._listeners["dragend"] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
</script>
<!-- dragsort.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register("dragstart", this._onDragStart)
group.register("dragmove", this._onDragMove)
group.register("dragend", this._onDragEnd)
return group
},
/**
* Iterates over a list"s items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register("dragstart", function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}
</script>
<!-- cookies.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt)
based on http://www.quirksmode.org/js/cookies.html
*/
ToolMan._cookieOven = {
set : function(name, value, expirationInDays) {
if (expirationInDays) {
var date = new Date()
date.setTime(date.getTime() + (expirationInDays * 24 * 60 * 60 * 1000))
var expires = "; expires=" + date.toGMTString()
} else {
var expires = ""
}
document.cookie = name + "=" + value + expires + "; path=/"
},
get : function(name) {
var namePattern = name + "="
var cookies = document.cookie.split(";")
for(var i = 0, n = cookies.length; i < n; i++) {
var c = cookies[i]
while (c.charAt(0) == " ") c = c.substring(1, c.length)
if (c.indexOf(namePattern) == 0)
return c.substring(namePattern.length, c.length)
}
return null
},
eraseCookie : function(name) {
createCookie(name, "", -1)
}
}
</script>
<script language="JavaScript" type="text/javascript"><!--
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer()
window.onload = function() {
junkdrawer.restoreListOrder("numeric")
junkdrawer.restoreListOrder("phonetic1")
junkdrawer.restoreListOrder("phonetic2")
junkdrawer.restoreListOrder("phonetic3")
junkdrawer.restoreListOrder("phoneticlong")
junkdrawer.restoreListOrder("boxes")
junkdrawer.restoreListOrder("buttons")
//junkdrawer.restoreListOrder("twolists1")
//junkdrawer.restoreListOrder("twolists2")
dragsort.makeListSortable(document.getElementById("numeric"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("phonetic1"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("phonetic2"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("phonetic3"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("phoneticlong"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("boxes"),
saveOrder)
dragsort.makeListSortable(document.getElementById("buttons"),
saveOrder)
/*
dragsort.makeListSortable(document.getElementById("twolists1"),
saveOrder)
dragsort.makeListSortable(document.getElementById("twolists2"),
saveOrder)
*/
}
function verticalOnly(item) {
item.toolManDragGroup.verticalOnly()
}
function speak(id, what) {
var element = document.getElementById(id);
element.innerHTML = "Clicked " + what;
}
function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute("id")
if (id == null) return
group.register("dragend", function() {
ToolMan.cookies().set("list-" + id,
junkdrawer.serializeList(list), 365)
})
}
//-->
</script></head>
<body>
<h1>Drag & Drop Sortable Lists with JavaScript and CSS</h1>
<b>rearrange the items</b>:</p>
<ul id="numeric">
<li style="position: relative;" itemid="1">one</li>
<li style="position: relative;" itemid="2">two</li>
<li style="position: relative;" itemid="3">three</li>
</ul>
<div class="sidebar">
<p>Click an <input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder("numeric")" style="margin: 0px; padding: 0px; font-size: 11px;" type="button">
button to reveal the serialized version of the associated list.</p>
</div>
<p>In Firefox you can also drag the <i>bullet</i> to move an item. Keen.</p>
<p><b>Saving the reorderd list</b> is possible by inspecting the DOM. All
the sortable lists on this page retain their order via cookies (try
rearranging a list and then reloading the page). Read a
<a href="http://blog.tool-man.org/saving-a-reordered-list/14">description of the technique</a> on my blog.
</p>
<h2>Example: Add Some Style</h2>
<div class="sidebar">
<p>Firefox exhibits a quirky bug on this example. If the list items
have a bottom margin, all following content pops down a few pixels when
you start dragging the item. No such problem when the item has a top
margin so a workaround is possible.</p>
</div>
<p>I added some styling and cursor hinting in an attempt to make
the dragability more obvious (see
<a href="http://tool-man.org/examples/edit-in-place.html">in-place editing</a> for an example
with drag handles).</p>
<table id="phonetics">
<tbody><tr>
<td>
<ul id="phonetic1" class="boxy">
<li style="position: relative;">alpha</li>
<li style="position: relative;">bravo</li>
<li style="position: relative;">charlie</li>
</ul>
</td>
<td>
<ul id="phonetic2" class="boxy">
<li style="position: relative;">alpha</li>
<li style="position: relative;">bravo</li>
<li style="position: relative;">charlie</li>
</ul>
</td>
<td>
<ul id="phonetic3" class="boxy">
<li style="position: relative;">bravo</li><li style="position: relative;">alpha</li><li style="position: relative;">charlie</li></ul>
</td>
</tr>
<tr>
<td class="caption">no margin on list items</td>
<td class="caption">4px bottom margin on list items. Firefox exhibits
bug when dragging.</td>
<td class="caption">Firefox workaround: -4px top margin on list, 4px
top margin on list items.</td>
</tr>
</tbody></table>
<p style="margin-top: 2em;">This next list is intentionally long to see how well the technique
scales up and uncover other interaction issues.</p>
<!-- yeah, it"s invalid XHTML. Suck it up, pedant-boy :) -->
<ul id="phoneticlong" class="boxy">
<li style="position: relative;" itemid="a">alpha</li><li style="position: relative;" itemid="b">bravo</li><li style="position: relative;" itemid="c">charlie</li><li style="position: relative;" itemid="d">delta</li><li style="position: relative;" itemid="e">echo</li><li style="position: relative;" itemid="f">foxtrot</li><li style="position: relative;" itemid="g">golf</li><li style="position: relative;" itemid="h">hotel</li><li style="position: relative;" itemid="i">india</li><li style="position: relative;" itemid="j">juliet</li><li style="position: relative;" itemid="k">kilo</li><li style="position: relative;" itemid="l">lima</li><li style="position: relative;" itemid="m">mike</li><li style="position: relative;" itemid="n">november</li><li style="position: relative;" itemid="o">oscar</li><li style="position: relative;" itemid="p">papa</li><li style="position: relative;" itemid="q">quebec</li><li style="position: relative;" itemid="r">romeo</li><li style="position: relative;" itemid="s">sierra</li><li style="position: relative;" itemid="y">yankee</li><li style="position: relative;" itemid="t">tango</li><li style="position: relative;" itemid="u">uniform</li><li style="position: relative;" itemid="v">victor</li><li style="position: relative;" itemid="w">whiskey</li><li style="position: relative;" itemid="x">xray</li><li style="position: relative;" itemid="z">zulu</li></ul>
<p><input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder("phoneticlong")" type="button"></p>
<p>You"ll notice if part of this list is below the fold, it requires
at least 2 drags to move an item from the beginning to the end (technically
3 drags if you count the one on your browser"s scrollbar). Automatic
scrolling, like in Word or Excel, is a well established solution to this
problem. Adding that is a work in progress.</p>
<h2>Example: Sorting in two dimensions</h2>
<div class="sidebar">
<p>Yet another bizarre bug in firefox. The short version:
use a DIV instead of a BR to clear the <code>float: left</code>
else things won’t remain as you expect them once you start
dragging.</p>
</div>
<p>With sorting vertically oriented items under our belt, onto
the next challenge: sorting floated, wrapped list items. Earlier
versions of my code had separate scripts for vertical, horizontal, and
wrapped lists. Now they are unified into one script that <i>does it all</i>.
Amazing!</p>
<ul id="boxes">
<li class="box">A</li><li class="box">B</li><li class="box">C</li><li class="box">D</li><li class="box">E</li><li class="box">F</li><li class="box">G</li><li class="box">H</li><li class="box">I</li><li class="box">J</li><li class="box">K</li><li class="box">L</li><li class="box">M</li><li class="box">O</li><li class="box">P</li><li class="box">Q</li><li class="box">R</li><li class="box">S</li><li class="box">T</li><li class="box">U</li><li class="box">V</li><li class="box">W</li><li class="box">X</li><li class="box">Y</li><li class="box">Z</li><li class="box">N</li></ul>
<div style="clear: left;"><br></div>
<p><input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder("boxes")" type="button"></p>
<p>A previous version determined when to swap based on the position of the
top-left corner of the item being dragged. It was this example and the
<a href="http://tool-man.org/examples/edit-in-place.html#slideshow-example">slide arranger</a>
example which illustrated that the better interaction is to base this on
the position of the cursor, which is how the script works now.</p>
<h2>Example: Sortable links or buttons</h2>
<div class="sidebar">
<p>Firefox and Safari still generate a "click" event even after performing
a drag. This can be overcome with more JavaScript.</p>
</div>
<div class="sidebar">
<p>IE isn"t rendering the link elements with <code>display: block</code>.
So only the link text is clickable.</p>
</div>
<p>Sortable items containing links. Links are "display: block" so the entire
item is clickable (except this isn"t so in IE). As buttons go these aren"t very good; they lack
button affordances and behavior. But I think you get the general idea.</p>
<div id="buttonsStatus" class="statusbox" style="position: relative; left: 11em;"> </div>
<ul id="buttons" class="sortable boxy clickable">
<li itemid="Save"><a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Save</a></li>
<li itemid="Cancel"><a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Cancel</a></li>
<li itemid="Preview"><a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Preview</a></li>
<li itemid="Print"><a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Print</a></li>
</ul>
<br>
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/sorting_files.zip">sorting_files.zip( 12 k)</a>
Dragable transparent window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) -->
<title>Dragging with JavaScript</title>
<!-- common.css -->
<style rel="stylesheet" type="text/css">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px 20px;
min-width: 30em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif;
margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
font-size: 22px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
color: #fff;
text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
border-style: solid;
border-color: #8760c1;
border-width: 1px 0px;
height: 19px;
}
.breadcrumb li.first {
border-left: 1px solid #8760c1;
}
.breadcrumb li {
float: left;
border-right: 1px solid #8760c1;
padding: 3px 10px;
}
.breadcrumb li a {
display: block;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
h1, .breadcrumb {
font-family: Skia;
background-color: #ccaaff;
margin-left: -20px;
margin-right: -20px;
}
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
max-width: 40em;
}
li p {
margin-bottom: 0.75em;
}
br.clear {
clear: both;
margin: 0px;
}
.sidebar {
margin: 0px 10px 30px 30px;
clear: right;
float: right;
width: 134px;
border: 1px solid #8760c1;
background-color: #ccaaff;
padding: 5px;
font-size: 11px;
font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
text-align: left;
}
.sidebar ul {
margin: 0px;
margin-left: 1.5em;
padding: 0px;
list-style-type: circle;
}
td.caption {
font-size: 12px;
text-align: center;
}
#copyright {
margin-bottom: 1em;
text-align: center;
font-size: 11px;
}
blockquote {
font-size: 13px;
font-style: italic;
}
blockquote .attribution {
font-weight: normal;
font-style: normal;
text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }
</style>
<style type="text/css">
div {
margin: 0px;
padding: 0px;
}
.verticalgridline {
padding-top: 27px;
}
.box, .handle {
font-size: 14px;
font-family: Arial, sans-serif;
border: 1px solid #aaa;
}
.box {
float: left;
padding: 0px;
width: 123px;
height: 123px;
margin: 5px;
background-color: #eee;
z-index: 1;
}
.handle {
cursor: move;
height: 14px;
border-width: 0px 0px 1px 0px;
background: #666;
color: #eee;
padding: 2px 6px;
margin: 0px;
}
.box p {
font-size: 12px;
margin: 5px 5px 10px 5px;
text-align: left;
white-space: normal;
}
#boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint,
#boxThreshold, #boxAbsolute {
cursor: move;
}
#boxAbsolute {
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
}
</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
}
</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
// TODO: write unit tests
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners["draginit"] = new Array()
this._listeners["dragstart"] = new Array()
this._listeners["dragmove"] = new Array()
this._listeners["dragend"] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
</script>
<script language="JavaScript"><!--
window.onload = function() {
var group
var coordinates = ToolMan.coordinates()
var drag = ToolMan.drag()
var boxDrag = document.getElementById("boxDrag")
drag.createSimpleGroup(boxDrag)
var boxVerticalOnly = document.getElementById("boxVerticalOnly")
group = drag.createSimpleGroup(boxVerticalOnly)
group.verticalOnly()
var boxHorizontalOnly = document.getElementById("boxHorizontalOnly")
group = drag.createSimpleGroup(boxHorizontalOnly)
group.horizontalOnly()
var boxRegionConstraint = document.getElementById("boxRegionConstraint")
group = drag.createSimpleGroup(boxRegionConstraint)
var origin = coordinates.create(0, 0)
group.addTransform(function(coordinate, dragEvent) {
var originalTopLeftOffset =
dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
return coordinate.constrainTo(origin, originalTopLeftOffset)
})
var boxThreshold = document.getElementById("boxThreshold")
group = drag.createSimpleGroup(boxThreshold)
group.setThreshold(25)
var boxHandle = document.getElementById("boxHandle")
group = drag.createSimpleGroup(boxHandle, document.getElementById("handle"))
var boxAbsolute = document.getElementById("boxAbsolute")
group = drag.createSimpleGroup(boxAbsolute)
group.verticalOnly()
group.addTransform(function(coordinate, dragEvent) {
var scrollOffset = coordinates.scrollOffset()
if (coordinate.y < scrollOffset.y)
return coordinates.create(coordinate.x, scrollOffset.y)
var clientHeight = coordinates.clientSize().y
var boxHeight = coordinates._size(boxAbsolute).y
if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
return coordinates.create(coordinate.x,
(scrollOffset.y + clientHeight) - boxHeight)
return coordinate
})
}
//-->
</script></head>
<body>
<h1>Dragging with JavaScript</h1>
<div>
<div style="position: relative;" id="boxDrag" class="box">
<p>drag to move</p>
</div>
<div style="position: relative;" id="boxHandle" class="box">
<div id="handle" class="handle"> </div>
<p>drag handle to move</p>
</div>
<div style="position: relative;" id="boxVerticalOnly" class="box">
<p>drag to move</p>
<p>vertical constraint</p>
</div>
<br style="clear: left;">
<div style="position: relative;" id="boxHorizontalOnly" class="box">
<p>drag to move</p>
<p>horizontal constraint</p>
</div>
<div style="position: relative;" id="boxRegionConstraint" class="box">
<p>drag to move</p>
<p>contrained to region</p>
</div>
<div style="position: relative;" id="boxThreshold" class="box">
<p>drag to move</p>
<p>exaggerated drag threshold</p>
</div>
</div>
<div style="top: 585px; left: 783px;" id="boxAbsolute" class="box">
<p>drag to move</p>
<p>absolutely positioned, constrained vertically and
within visible area</p>
</div>
<div class="sidebar">
<p><b>Update 4/26</b>: tested and working as expected in IE6, Firefox 1.0,
and Safari 1.3, unless otherwise noted.</p>
<p>Safari 1.2 leaves visual artifacts on the background while dragging.</p>
</div>
<div class="sidebar">
dragging.</p>
</div>
<div id="copyright">Copyright 2005 Tim Taylor Consulting
(<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)</div>
</body></html>
Drag and drop custom window with title bar
/* CopyRight www.youngpup.net */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html><head>
<script language="javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<style type="text/css">
#root {
position:absolute;
height:100px;
width:150px;
background-color:#F4F4F4;
border:1px solid #333;
}
#handle {
margin:2px;
padding:2px;
width:142px;
color:white;
background-color:navy;
font-family:verdana, sans-serif;
font-size:10px;
}
</style></head>
<body>
<div id="root" style="left: 20px; top: 20px;">
<div id="handle">Handle</div>
</div>
<script language="javascript">
var theHandle = document.getElementById("handle");
var theRoot = document.getElementById("root");
Drag.init(theHandle, theRoot);
</script>
</body></html>
Drag and Drop - DDProxy
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<body>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDSwap.js" ></script>
<script type="text/javascript" language="JavaScript">
YAHOO.example.DDApp = function() {
var dd, dd2, dd3;
function handleKeypress(e) {
alert("asdf");
YAHOO.log("keypress");
YAHOO.util.Event.stopEvent(e);
e.cancel = true;
return false;
}
function initPointMode() {
YAHOO.log("point mode");
unreg();
YAHOO.util.DDM.mode = YAHOO.util.DDM.POINT;
dd = new YAHOO.example.DDSwap("dragDiv1", "proxytest");
// dd.setPadding(10);
//dd.setXConstraint(0,0);
dd2 = new YAHOO.example.DDSwap("dragDiv2", "proxytest");
dd2.addInvalidHandleType("input");
// dd2.setPadding(10, 20, 30, 40);
// dd2.setXConstraint(0,0);
// the third DD instance uses its own proxy element
dd3 = new YAHOO.example.DDSwap("dragDiv3", "proxytest",
{ dragElId: "dragDiv4" });
// dd3.setPadding(10, 40);
// dd3.setPadding(10, 0, 20, 40);
}
function initIntersectMode() {
YAHOO.log("intersect mode");
unreg();
YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT;
dd = new YAHOO.example.DDSwap_i("dragDiv1");
//dd.setPadding(10);
dd2 = new YAHOO.example.DDSwap_i("dragDiv2");
dd2.addInvalidHandleType("input");
//dd2.setPadding(10, 20, 30, 40);
// dd2.setXConstraint(0,0);
dd3 = new YAHOO.example.DDSwap_i("dragDiv3");
// dd3.setPadding(10, 40);
//dd3.setPadding(10, 0, 20, 40);
}
function unreg() {
if (dd) dd.unreg();
if (dd2) dd2.unreg();
if (dd3) dd3.unreg();
}
return {
init: function() {
// YAHOO.util.Event.on("testtext", "keydown", handleKeypress);
initPointMode();
},
lock: function() {
dd.lock();
dd2.setXConstraint(100, 100);
dd2.setYConstraint(100, 100);
},
unlock: function() {
dd.unlock();
},
changeMode: function(val) {
if (val == 1) {
initIntersectMode();
} else {
initPointMode();
}
},
unreg: function() {
dd.unreg();
}
};
}();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
<div id="pageTitle">
<h3>Drag and Drop - DDProxy</h3>
</div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>Proxy</h3>
<!--
<a href="javascript:YAHOO.util.DDM._onUnload()">Unload test</a>
<a href="javascript:YAHOO.example.DDApp.lock()">lock</a>
<a href="javascript:YAHOO.example.DDApp.unlock()">unlock</a>
<a href="javascript:YAHOO.example.DDApp.unreg()">Unreg test</a>
-->
<p>
This example builds on
<a>YAHOO.util.DD</a>.
Instead of moving the actual html element that was clicked, we have a hidden
layer, empty aside from a border, absolutely positioned, that we place in the same
location of the clicked object. The onDrag event handler was implemented so
that the style of the DragDrop elements change when they interact. The onDragDrop
event handler was implemented so that the elements swap positions if one is dropped
on another.
Mode:
<select onchange="YAHOO.example.DDApp.changeMode(this.selectedIndex)">
<option value="0" selected>Point</point>
<option value="1">Intersect</point>
</select>
<!--
<input name="testtext" id="testtext" type="text" />
-->
</p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<!--
<div id="wrapperDiv" style="position:relative;width:400px;top:200px;height:200px;overflow:auto">
-->
<div id="dragDiv1" class="testSquare" style="background:url(./examples/dragdrop/img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:270px; left:105px ">DDSwap</div>
<div id="dragDiv2" class="testSquare" style="background:url(./examples/dragdrop/img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">
DDSwap
<!--
<input type="text" name="testinput" />
-->
</div>
<div id="wrapperDiv">
<div id="dragDiv3" class="testSquare" style="background:url(./examples/dragdrop/img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:430px; left:325px">DDSwap</div>
</div>
<div id="dragDiv4" class="testSquare" style="visibility:hidden;border:0px solid black;height: 141px;width:160px;background-color:#7E5B60;top:630px; left:525px">a custom proxy element</div>
<!--
</div>
-->
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Drag and Drop: Multiple groups, targetable affordance
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDPlayer.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var slots = [];
var players = [];
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DDM;
return {
remove: function() {
players[4].removeFromGroup("bottomslots");
},
init: function() {
// slots
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
// players
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
players[4].addToGroup("bottomslots");
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
players[5].addToGroup("bottomslots");
DDM.mode = document.getElementById("ddmode").selectedIndex;
}
};
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
//YAHOO.util.Event.addListener("removeButton", "click", YAHOO.example.DDApp.remove);
</script>
<body>
<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>Multiple groups, targetable affordance</h3>
<p>
Mode:
<select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex">
<option value="0" selected>Point</point>
<option value="1">Intersect</point>
</select>
</p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
<div id="workArea"> </div>
<p>
<!--
<input id="removeButton" type="button" value="remove" />
-->
</p>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
#t1 { left: 90px; top: 167px; }
#t2 { left: 458px; top: 167px; }
#b1 { left: 164px; top: 230px; }
#b2 { left: 238px; top: 230px; }
#b3 { left: 312px; top: 230px; }
#b4 { left: 386px; top: 230px; }
#pt1 { background-color:#7E695E; left: 164px; top: 350px; }
#pt2 { background-color:#7E695E; left: 164px; top: 430px; }
#pb1 { background-color:#416153; left: 275px; top: 350px; }
#pb2 { background-color:#416153; left: 275px; top: 430px; }
#pboth1 { background-color:#552E37; left: 386px; top: 350px; }
#pboth2 { background-color:#552E37; left: 386px; top: 430px; }
</style>
<div class="slot" id="t1" >1</div>
<div class="slot" id="t2" >2</div>
<div class="slot" id="b1" >3</div>
<div class="slot" id="b2" >4</div>
<div class="slot" id="b3" >5</div>
<div class="slot" id="b4" >6</div>
<div class="player" id="pt1" >1</div>
<div class="player" id="pt2" >2</div>
<div class="player" id="pb1" >3</div>
<div class="player" id="pb2" >4</div>
<div class="player" id="pboth1" >5</div>
<div class="player" id="pboth2" >6</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Drag and Drop to sort lists
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) --><title>Edit in Place with JavaScript and CSS</title>
<!-- common.css -->
<STYLE rel="stylesheet" type="text/css">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px 20px;
min-width: 30em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif;
margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
font-size: 22px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
color: #fff;
text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
border-style: solid;
border-color: #8760c1;
border-width: 1px 0px;
height: 19px;
}
.breadcrumb li.first {
border-left: 1px solid #8760c1;
}
.breadcrumb li {
float: left;
border-right: 1px solid #8760c1;
padding: 3px 10px;
}
.breadcrumb li a {
display: block;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
h1, .breadcrumb {
font-family: Skia;
background-color: #ccaaff;
margin-left: -20px;
margin-right: -20px;
}
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
max-width: 40em;
}
li p {
margin-bottom: 0.75em;
}
br.clear {
clear: both;
margin: 0px;
}
.sidebar {
margin: 0px 10px 30px 30px;
clear: right;
float: right;
width: 134px;
border: 1px solid #8760c1;
background-color: #ccaaff;
padding: 5px;
font-size: 11px;
font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
text-align: left;
}
.sidebar ul {
margin: 0px;
margin-left: 1.5em;
padding: 0px;
list-style-type: circle;
}
td.caption {
font-size: 12px;
text-align: center;
}
#copyright {
margin-bottom: 1em;
text-align: center;
font-size: 11px;
}
blockquote {
font-size: 13px;
font-style: italic;
}
blockquote .attribution {
font-weight: normal;
font-style: normal;
text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }
</STYLE>
<!-- lists.css -->
<style rel="stylesheet" type="text/css">
ul.sortable li {
position: relative;
}
ul.boxy {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 10em;
font-size: 13px;
font-family: Arial, sans-serif;
}
ul.boxy li {
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}
.clickable a {
display: block;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.clickable li:hover {
background-color: #f6f6f6;
}
</STYLE>
<style type="text/css"><!--
/* TODO: this CSS is in need of major cleanup */
.slideshow {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.slide {
position: relative;
float: left;
width: 172px;
margin-bottom: 10px;
margin-right: 10px;
}
.slide div.thumb {
background: #fff;
width: 170px;
height: 120px;
border: 1px solid #000;
font-size: 5px;
font-family: "Times New Roman", serif;
overflow: hidden;
}
.slide .view {
padding: 2px 2px;
margin: 2px 0px;
cursor: text;
border-width: 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
height: 1em;
}
.view:hover {
background-color: #ffffcc;
}
.view, .inplace, #list5 input {
font-size: 14px;
font-family: sans-serif;
}
.inplace {
position: absolute;
visibility: hidden;
z-index: 10000;
}
.inplace, #list5 input:hover, #list5 input:focus {
background-color: #ffffcc;
}
#slideEditors input.inplace {
width: 12em;
max-width: 12em;
margin-left: 1px;
}
#slideEditors input.inplace, #slideshow .view {
text-align: center;
}
#paragraphView, #paragraphEdit, #markupView, #markupEdit {
font-family: "Times New Roman", serif;
font-size: 14px;
}
#paragraphView, #markupView {
border: 1px solid #fff;
padding: 8px;
width: 400px;
max-width: 400px;
}
#paragraphView:hover, #markupView:hover {
background-color: #ffffcc;
border-color: #ccc;
}
#paragraphEdit, #markupEdit {
width: 315px;
background-color: #ffffcc;
}
#paragraphEdit {
height: 5em;
}
#markupEdit {
height: 15em;
}
#listExamples td {
width: 9em;
margin-right: 20px;
padding: 0px 20px;
vertical-align: top;
}
#listExamples th {
vertical-align: bottom;
font-weight: normal;
font-size: 14px;
padding-top: 20px;
}
#listExamples td.caption {
font-size: 12px;
text-align: center;
}
#listExamples li {
padding: 0px;
height: 20px;
min-height: 1em;
width: 120px;
}
#listExamples li .view {
height: 16px;
vertical-align: middle;
padding: 2px;
}
#list1 li:hover {
background-color: #eee;
}
#listExamples input.inplace {
width: 120px;
max-width: 120px;
}
/* BugFix: Firefox: avoid bottom margin on draggable elements */
#listExamples #list4, #listExamples #list5 { margin-top: -2px; }
#listExamples #list4 li, #listExamples #list5 li { margin-top: 4px; }
#listExamples #list4 li { cursor: default; }
#listExamples #list4 .handle,
#listExamples #list5 .handle {
float: right;
background-color: #ccc;
background-image: url(common/handle.png);
background-repeat: repeat-y;
width: 7px;
height: 20px;
}
#listExamples #list4 li .view {
cursor: text;
}
#listExamples #list4Editors input.inplace, #listExamples #list5 input {
width: 104px;
max-width: 104px;
}
#listExamples #list4Editors>input.inplace, #listExamples #list5>li>input {
width: 111px;
max-width: 111px;
}
#list5 input {
background-color: #eee;
}
.inplace, #list5 input {
margin: 0px;
padding-left: 1px;
}
.handle {
cursor: move;
}
--></style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
}
</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
}
</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
// TODO: write unit tests
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners["draginit"] = new Array()
this._listeners["dragstart"] = new Array()
this._listeners["dragmove"] = new Array()
this._listeners["dragend"] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
</script>
<!-- dragsort.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register("dragstart", this._onDragStart)
group.register("dragmove", this._onDragMove)
group.register("dragend", this._onDragEnd)
return group
},
/**
* Iterates over a list"s items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register("dragstart", function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}
</script>
<script language="JavaScript"><!--
var ESCAPE = 27
var ENTER = 13
var TAB = 9
var coordinates = ToolMan.coordinates()
var dragsort = ToolMan.dragsort()
window.onload = function() {
// TODO: this API sucks
join("paragraph", true)
join("markup", true)
join("a2", true)
join("b2", true)
join("c2", true)
join("d2", true)
join("e2", true)
join("a3")
join("b3")
join("c3")
join("d3")
join("e3")
join("a4")
join("b4")
join("c4")
join("d4")
join("e4")
join("one")
join("two")
join("three")
join("four")
join("five")
join("six")
dragsort.makeListSortable(document.getElementById("list1"))
dragsort.makeListSortable(document.getElementById("list2"))
dragsort.makeListSortable(document.getElementById("list3"))
dragsort.makeListSortable(document.getElementById("list4"), setHandle)
dragsort.makeListSortable(document.getElementById("list5"), setHandle)
dragsort.makeListSortable(document.getElementById("slideshow"), setHandle)
}
function setHandle(item) {
item.toolManDragGroup.setHandle(findHandle(item))
}
function findHandle(item) {
var children = item.getElementsByTagName("div")
for (var i = 0; i < children.length; i++) {
var child = children[i]
if (child.getAttribute("class") == null) continue
if (child.getAttribute("class").indexOf("handle") >= 0)
return child
}
return item
}
function join(name, isDoubleClick) {
var view = document.getElementById(name + "View")
view.editor = document.getElementById(name + "Edit")
var showEditor = function(event) {
event = fixEvent(event)
var view = this
var editor = view.editor
if (!editor) return true
if (editor.currentView != null) {
editor.blur()
}
editor.currentView = view
var topLeft = coordinates.topLeftOffset(view)
topLeft.reposition(editor)
if (editor.nodeName == "TEXTAREA") {
editor.style["width"] = view.offsetWidth + "px"
editor.style["height"] = view.offsetHeight + "px"
}
editor.value = view.innerHTML
editor.style["visibility"] = "visible"
view.style["visibility"] = "hidden"
editor.focus()
return false
}
if (isDoubleClick) {
view.ondblclick = showEditor
} else {
view.onclick = showEditor
}
view.editor.onblur = function(event) {
event = fixEvent(event)
var editor = event.target
var view = editor.currentView
if (!editor.abandonChanges) view.innerHTML = editor.value
editor.abandonChanges = false
editor.style["visibility"] = "hidden"
editor.value = "" // fixes firefox 1.0 bug
view.style["visibility"] = "visible"
editor.currentView = null
return true
}
view.editor.onkeydown = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == TAB) {
editor.blur()
return false
}
}
view.editor.onkeyup = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == ESCAPE) {
editor.abandonChanges = true
editor.blur()
return false
} else if (event.keyCode == TAB) {
return false
} else {
return true
}
}
// TODO: this method is duplicated elsewhere
function fixEvent(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
}
}
//-->
</script></head>
<body>
<h1>Edit in Place with JavaScript and CSS</h1>
<br class="clear">
<div class="sidebar">
<p>.</p>
</div>
<h2>Editable Content</h2>
<p id="paragraphView">Editable #1: Double-click anywhere in this
paragraph to edit its content. Press TAB or click outside the edit area
to finish. Press ESCAPE to cancel.</p>
<textarea id="paragraphEdit" class="inplace" tabindex="1"></textarea>
<div id="markupView">
<p>Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.</p>
<p>We can do paragraphs, <b>styling</b>, <a href="http://tool-man.org/examples/index.html">links</a>,
or any HTML, really.</p>
<table style="text-align: center;" cellpadding="3" cellspacing="0">
<tbody><tr>
<td></td>
<th style="border-bottom: 1px solid;">DADA</th>
<th style="border-bottom: 1px solid;">NHUG</th>
<th style="border-bottom: 1px solid;">TTAY</th>
</tr>
<tr>
<th style="border-right: 1px solid;">DADA</th>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th style="border-right: 1px solid;">NHUG</th>
<td>1</td>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>2</td>
</tr>
<tr>
<th style="border-right: 1px solid;">TTAY</th>
<td>3</td>
<td>2</td>
<td style="background-color: rgb(204, 204, 204);"></td>
</tr>
</tbody></table>
<br>
<p>Without applying some kind of limitation, any markup whatsoever can be
entered. In practice you would normally want to limit the type of markup
allowed perhaps via a <a href="http://tinymce.moxiecode.ru/">wysiwyg editor</a>
or a text formatter like <a href="http://daringfireball.net/projects/markdown/">Markdown</a>.
</p>
</div>
<textarea id="markupEdit" class="inplace" tabindex="2"></textarea>
<h2>Sortable, Editable Lists</h2>
<div class="sidebar">
<p>Firefox and Safari register "click" events after a drag causing the
field to become editable, which is undesirable. This is the same
problem with the sortable links and buttons example in
<a href="http://tool-man.org/examples/sorting.html">DnD Sortable Lists</a>.</p>
</div>
<p>Combining in place editing with
<a href="http://tool-man.org/examples/sorting.html">Drag & Drop Sortable Lists</a> results in
nice direct manipulation for managing a list of labels.</p>
<table id="listExamples">
<tbody><tr>
<th>List 1</th>
<th>List 2</th>
<th>List 3</th>
</tr>
<tr>
<td>
<ul id="list1" class="sortable boxy">
<li class="view">alpha</li>
<li class="view">bravo</li>
<li class="view">charlie</li>
<li class="view">delta</li>
<li class="view">echo</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input id="a2Edit" name="a2Edit" class="inplace">
<input id="b2Edit" name="b2Edit" class="inplace">
<input id="c2Edit" name="c2Edit" class="inplace">
<input id="d2Edit" name="d2Edit" class="inplace">
<input id="e2Edit" name="e2Edit" class="inplace">
<ul id="list2" class="sortable boxy">
<li>
<div id="a2View" class="view">alpha</div>
</li>
<li>
<div id="b2View" class="view">bravo</div>
</li>
<li>
<div id="c2View" class="view">charlie</div>
</li>
<li>
<div id="d2View" class="view">delta</div>
</li>
<li>
<div id="e2View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input style="top: 825px; left: 386px; visibility: visible;" id="a3Edit" name="a3Edit" class="inplace">
<input id="b3Edit" name="b3Edit" class="inplace">
<input id="c3Edit" name="c3Edit" class="inplace">
<input id="d3Edit" name="d3Edit" class="inplace">
<input id="e3Edit" name="e3Edit" class="inplace">
<ul id="list3" class="sortable boxy">
<li>
<div id="b3View" class="view">bravo</div>
</li>
<li>
<div id="c3View" class="view">charlie</div>
</li>
<li>
<div id="d3View" class="view">delta</div>
</li>
<li style="opacity: 1; z-index: auto; top: 0px; left: 0px;">
<div style="visibility: hidden;" id="a3View" class="view">alpha</div>
</li><li>
<div id="e3View" class="view">echo</div>
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Sort only</td>
<td class="caption">Sort and edit (double click)</td>
<td class="caption">Sort and edit (single click)</td>
</tr>
<tr>
<th>List 4</th>
<th>List 5</th>
<th></th>
</tr>
<tr>
<td>
<div id="list4Editors">
<input id="a4Edit" name="a4Edit" class="inplace" tabindex="10">
<input id="b4Edit" name="b4Edit" class="inplace" tabindex="10">
<input id="c4Edit" name="c4Edit" class="inplace" tabindex="10">
<input id="d4Edit" name="d4Edit" class="inplace" tabindex="10">
<input id="e4Edit" name="e4Edit" class="inplace" tabindex="10">
</div>
<ul id="list4" class="sortable boxy">
<li>
<div class="handle"></div>
<div id="a4View" class="view">alpha</div>
</li>
<li>
<div class="handle"></div>
<div id="b4View" class="view">bravo</div>
</li>
<li>
<div class="handle"></div>
<div id="c4View" class="view">charlie</div>
</li>
<li>
<div class="handle"></div>
<div id="d4View" class="view">delta</div>
</li>
<li>
<div class="handle"></div>
<div id="e4View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<ul id="list5" class="sortable boxy">
<li>
<div class="handle"></div>
<input id="a5Edit" name="a5Edit" value="alpha">
</li>
<li>
<div class="handle"></div>
<input id="b5Edit" name="b5Edit" value="bravo">
</li>
<li>
<div class="handle"></div>
<input id="c5Edit" name="c5Edit" value="charlie">
</li>
<li>
<div class="handle"></div>
<input id="d5Edit" name="d5Edit" value="delta">
</li>
<li>
<div class="handle"></div>
<input id="e5Edit" name="e5Edit" value="echo">
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Drag handles</td>
<td class="caption">Always editable</td>
<td class="caption"></td>
</tr>
</tbody></table>
<br>
<a name="slideshow-example"></a>
<table><tbody><tr><td>
<div id="slideEditors">
<!--
IE 5.5+ BugFix: don"t put these inside a "position: relative" layer
-->
<input id="oneEdit" name="oneEdit" class="inplace">
<input id="twoEdit" name="oneEdit" class="inplace">
<input id="threeEdit" name="oneEdit" class="inplace">
<input id="fourEdit" name="oneEdit" class="inplace">
<input id="fiveEdit" name="oneEdit" class="inplace">
<input id="sixEdit" name="oneEdit" class="inplace">
</div>
<ul id="slideshow" class="slideshow">
<li class="slide">
<div class="thumb handle"><img src="dragableSlide1.png"></div>
<div id="oneView" class="view">Slide 1</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide2.png"></div>
<div id="twoView" class="view">Slide 2</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide3.png"></div>
<div id="threeView" class="view">Slide 3</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide4.png"></div>
<div id="fourView" class="view">Slide 4</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide5.png"></div>
<div id="fiveView" class="view">Slide 5</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide6.png"></div>
<div id="sixView" class="view">Slide 6</div>
</li>
</ul>
</td></tr></tbody></table>
<br style="clear: both;">
<div id="copyright">Copyright 2005 Tim Taylor Consulting
(<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)</div>
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/edit-in-place_files.zip">edit-in-place_files.zip( 49 k)</a>
Drag and Drop to sort slides
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) --><title>Edit in Place with JavaScript and CSS</title>
<!-- common.css -->
<STYLE rel="stylesheet" type="text/css">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px 20px;
min-width: 30em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif;
margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
font-size: 22px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
color: #fff;
text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
border-style: solid;
border-color: #8760c1;
border-width: 1px 0px;
height: 19px;
}
.breadcrumb li.first {
border-left: 1px solid #8760c1;
}
.breadcrumb li {
float: left;
border-right: 1px solid #8760c1;
padding: 3px 10px;
}
.breadcrumb li a {
display: block;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
h1, .breadcrumb {
font-family: Skia;
background-color: #ccaaff;
margin-left: -20px;
margin-right: -20px;
}
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
max-width: 40em;
}
li p {
margin-bottom: 0.75em;
}
br.clear {
clear: both;
margin: 0px;
}
.sidebar {
margin: 0px 10px 30px 30px;
clear: right;
float: right;
width: 134px;
border: 1px solid #8760c1;
background-color: #ccaaff;
padding: 5px;
font-size: 11px;
font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
text-align: left;
}
.sidebar ul {
margin: 0px;
margin-left: 1.5em;
padding: 0px;
list-style-type: circle;
}
td.caption {
font-size: 12px;
text-align: center;
}
#copyright {
margin-bottom: 1em;
text-align: center;
font-size: 11px;
}
blockquote {
font-size: 13px;
font-style: italic;
}
blockquote .attribution {
font-weight: normal;
font-style: normal;
text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }
</STYLE>
<!-- lists.css -->
<style rel="stylesheet" type="text/css">
ul.sortable li {
position: relative;
}
ul.boxy {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 10em;
font-size: 13px;
font-family: Arial, sans-serif;
}
ul.boxy li {
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}
.clickable a {
display: block;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.clickable li:hover {
background-color: #f6f6f6;
}
</STYLE>
<style type="text/css"><!--
/* TODO: this CSS is in need of major cleanup */
.slideshow {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.slide {
position: relative;
float: left;
width: 172px;
margin-bottom: 10px;
margin-right: 10px;
}
.slide div.thumb {
background: #fff;
width: 170px;
height: 120px;
border: 1px solid #000;
font-size: 5px;
font-family: "Times New Roman", serif;
overflow: hidden;
}
.slide .view {
padding: 2px 2px;
margin: 2px 0px;
cursor: text;
border-width: 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
height: 1em;
}
.view:hover {
background-color: #ffffcc;
}
.view, .inplace, #list5 input {
font-size: 14px;
font-family: sans-serif;
}
.inplace {
position: absolute;
visibility: hidden;
z-index: 10000;
}
.inplace, #list5 input:hover, #list5 input:focus {
background-color: #ffffcc;
}
#slideEditors input.inplace {
width: 12em;
max-width: 12em;
margin-left: 1px;
}
#slideEditors input.inplace, #slideshow .view {
text-align: center;
}
#paragraphView, #paragraphEdit, #markupView, #markupEdit {
font-family: "Times New Roman", serif;
font-size: 14px;
}
#paragraphView, #markupView {
border: 1px solid #fff;
padding: 8px;
width: 400px;
max-width: 400px;
}
#paragraphView:hover, #markupView:hover {
background-color: #ffffcc;
border-color: #ccc;
}
#paragraphEdit, #markupEdit {
width: 315px;
background-color: #ffffcc;
}
#paragraphEdit {
height: 5em;
}
#markupEdit {
height: 15em;
}
#listExamples td {
width: 9em;
margin-right: 20px;
padding: 0px 20px;
vertical-align: top;
}
#listExamples th {
vertical-align: bottom;
font-weight: normal;
font-size: 14px;
padding-top: 20px;
}
#listExamples td.caption {
font-size: 12px;
text-align: center;
}
#listExamples li {
padding: 0px;
height: 20px;
min-height: 1em;
width: 120px;
}
#listExamples li .view {
height: 16px;
vertical-align: middle;
padding: 2px;
}
#list1 li:hover {
background-color: #eee;
}
#listExamples input.inplace {
width: 120px;
max-width: 120px;
}
/* BugFix: Firefox: avoid bottom margin on draggable elements */
#listExamples #list4, #listExamples #list5 { margin-top: -2px; }
#listExamples #list4 li, #listExamples #list5 li { margin-top: 4px; }
#listExamples #list4 li { cursor: default; }
#listExamples #list4 .handle,
#listExamples #list5 .handle {
float: right;
background-color: #ccc;
background-image: url(common/handle.png);
background-repeat: repeat-y;
width: 7px;
height: 20px;
}
#listExamples #list4 li .view {
cursor: text;
}
#listExamples #list4Editors input.inplace, #listExamples #list5 input {
width: 104px;
max-width: 104px;
}
#listExamples #list4Editors>input.inplace, #listExamples #list5>li>input {
width: 111px;
max-width: 111px;
}
#list5 input {
background-color: #eee;
}
.inplace, #list5 input {
margin: 0px;
padding-left: 1px;
}
.handle {
cursor: move;
}
--></style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
}
</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
}
</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
// TODO: write unit tests
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners["draginit"] = new Array()
this._listeners["dragstart"] = new Array()
this._listeners["dragmove"] = new Array()
this._listeners["dragend"] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
</script>
<!-- dragsort.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register("dragstart", this._onDragStart)
group.register("dragmove", this._onDragMove)
group.register("dragend", this._onDragEnd)
return group
},
/**
* Iterates over a list"s items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register("dragstart", function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}
</script>
<script language="JavaScript"><!--
var ESCAPE = 27
var ENTER = 13
var TAB = 9
var coordinates = ToolMan.coordinates()
var dragsort = ToolMan.dragsort()
window.onload = function() {
// TODO: this API sucks
join("paragraph", true)
join("markup", true)
join("a2", true)
join("b2", true)
join("c2", true)
join("d2", true)
join("e2", true)
join("a3")
join("b3")
join("c3")
join("d3")
join("e3")
join("a4")
join("b4")
join("c4")
join("d4")
join("e4")
join("one")
join("two")
join("three")
join("four")
join("five")
join("six")
dragsort.makeListSortable(document.getElementById("list1"))
dragsort.makeListSortable(document.getElementById("list2"))
dragsort.makeListSortable(document.getElementById("list3"))
dragsort.makeListSortable(document.getElementById("list4"), setHandle)
dragsort.makeListSortable(document.getElementById("list5"), setHandle)
dragsort.makeListSortable(document.getElementById("slideshow"), setHandle)
}
function setHandle(item) {
item.toolManDragGroup.setHandle(findHandle(item))
}
function findHandle(item) {
var children = item.getElementsByTagName("div")
for (var i = 0; i < children.length; i++) {
var child = children[i]
if (child.getAttribute("class") == null) continue
if (child.getAttribute("class").indexOf("handle") >= 0)
return child
}
return item
}
function join(name, isDoubleClick) {
var view = document.getElementById(name + "View")
view.editor = document.getElementById(name + "Edit")
var showEditor = function(event) {
event = fixEvent(event)
var view = this
var editor = view.editor
if (!editor) return true
if (editor.currentView != null) {
editor.blur()
}
editor.currentView = view
var topLeft = coordinates.topLeftOffset(view)
topLeft.reposition(editor)
if (editor.nodeName == "TEXTAREA") {
editor.style["width"] = view.offsetWidth + "px"
editor.style["height"] = view.offsetHeight + "px"
}
editor.value = view.innerHTML
editor.style["visibility"] = "visible"
view.style["visibility"] = "hidden"
editor.focus()
return false
}
if (isDoubleClick) {
view.ondblclick = showEditor
} else {
view.onclick = showEditor
}
view.editor.onblur = function(event) {
event = fixEvent(event)
var editor = event.target
var view = editor.currentView
if (!editor.abandonChanges) view.innerHTML = editor.value
editor.abandonChanges = false
editor.style["visibility"] = "hidden"
editor.value = "" // fixes firefox 1.0 bug
view.style["visibility"] = "visible"
editor.currentView = null
return true
}
view.editor.onkeydown = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == TAB) {
editor.blur()
return false
}
}
view.editor.onkeyup = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == ESCAPE) {
editor.abandonChanges = true
editor.blur()
return false
} else if (event.keyCode == TAB) {
return false
} else {
return true
}
}
// TODO: this method is duplicated elsewhere
function fixEvent(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
}
}
//-->
</script></head>
<body>
<h1>Edit in Place with JavaScript and CSS</h1>
<br class="clear">
<div class="sidebar">
<p>.</p>
</div>
<h2>Editable Content</h2>
<p id="paragraphView">Editable #1: Double-click anywhere in this
paragraph to edit its content. Press TAB or click outside the edit area
to finish. Press ESCAPE to cancel.</p>
<textarea id="paragraphEdit" class="inplace" tabindex="1"></textarea>
<div id="markupView">
<p>Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.</p>
<p>We can do paragraphs, <b>styling</b>, <a href="http://tool-man.org/examples/index.html">links</a>,
or any HTML, really.</p>
<table style="text-align: center;" cellpadding="3" cellspacing="0">
<tbody><tr>
<td></td>
<th style="border-bottom: 1px solid;">DADA</th>
<th style="border-bottom: 1px solid;">NHUG</th>
<th style="border-bottom: 1px solid;">TTAY</th>
</tr>
<tr>
<th style="border-right: 1px solid;">DADA</th>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th style="border-right: 1px solid;">NHUG</th>
<td>1</td>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>2</td>
</tr>
<tr>
<th style="border-right: 1px solid;">TTAY</th>
<td>3</td>
<td>2</td>
<td style="background-color: rgb(204, 204, 204);"></td>
</tr>
</tbody></table>
<br>
<p>Without applying some kind of limitation, any markup whatsoever can be
entered. In practice you would normally want to limit the type of markup
allowed perhaps via a <a href="http://tinymce.moxiecode.ru/">wysiwyg editor</a>
or a text formatter like <a href="http://daringfireball.net/projects/markdown/">Markdown</a>.
</p>
</div>
<textarea id="markupEdit" class="inplace" tabindex="2"></textarea>
<h2>Sortable, Editable Lists</h2>
<div class="sidebar">
<p>Firefox and Safari register "click" events after a drag causing the
field to become editable, which is undesirable. This is the same
problem with the sortable links and buttons example in
<a href="http://tool-man.org/examples/sorting.html">DnD Sortable Lists</a>.</p>
</div>
<p>Combining in place editing with
<a href="http://tool-man.org/examples/sorting.html">Drag & Drop Sortable Lists</a> results in
nice direct manipulation for managing a list of labels.</p>
<table id="listExamples">
<tbody><tr>
<th>List 1</th>
<th>List 2</th>
<th>List 3</th>
</tr>
<tr>
<td>
<ul id="list1" class="sortable boxy">
<li class="view">alpha</li>
<li class="view">bravo</li>
<li class="view">charlie</li>
<li class="view">delta</li>
<li class="view">echo</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input id="a2Edit" name="a2Edit" class="inplace">
<input id="b2Edit" name="b2Edit" class="inplace">
<input id="c2Edit" name="c2Edit" class="inplace">
<input id="d2Edit" name="d2Edit" class="inplace">
<input id="e2Edit" name="e2Edit" class="inplace">
<ul id="list2" class="sortable boxy">
<li>
<div id="a2View" class="view">alpha</div>
</li>
<li>
<div id="b2View" class="view">bravo</div>
</li>
<li>
<div id="c2View" class="view">charlie</div>
</li>
<li>
<div id="d2View" class="view">delta</div>
</li>
<li>
<div id="e2View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input style="top: 825px; left: 386px; visibility: visible;" id="a3Edit" name="a3Edit" class="inplace">
<input id="b3Edit" name="b3Edit" class="inplace">
<input id="c3Edit" name="c3Edit" class="inplace">
<input id="d3Edit" name="d3Edit" class="inplace">
<input id="e3Edit" name="e3Edit" class="inplace">
<ul id="list3" class="sortable boxy">
<li>
<div id="b3View" class="view">bravo</div>
</li>
<li>
<div id="c3View" class="view">charlie</div>
</li>
<li>
<div id="d3View" class="view">delta</div>
</li>
<li style="opacity: 1; z-index: auto; top: 0px; left: 0px;">
<div style="visibility: hidden;" id="a3View" class="view">alpha</div>
</li><li>
<div id="e3View" class="view">echo</div>
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Sort only</td>
<td class="caption">Sort and edit (double click)</td>
<td class="caption">Sort and edit (single click)</td>
</tr>
<tr>
<th>List 4</th>
<th>List 5</th>
<th></th>
</tr>
<tr>
<td>
<div id="list4Editors">
<input id="a4Edit" name="a4Edit" class="inplace" tabindex="10">
<input id="b4Edit" name="b4Edit" class="inplace" tabindex="10">
<input id="c4Edit" name="c4Edit" class="inplace" tabindex="10">
<input id="d4Edit" name="d4Edit" class="inplace" tabindex="10">
<input id="e4Edit" name="e4Edit" class="inplace" tabindex="10">
</div>
<ul id="list4" class="sortable boxy">
<li>
<div class="handle"></div>
<div id="a4View" class="view">alpha</div>
</li>
<li>
<div class="handle"></div>
<div id="b4View" class="view">bravo</div>
</li>
<li>
<div class="handle"></div>
<div id="c4View" class="view">charlie</div>
</li>
<li>
<div class="handle"></div>
<div id="d4View" class="view">delta</div>
</li>
<li>
<div class="handle"></div>
<div id="e4View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<ul id="list5" class="sortable boxy">
<li>
<div class="handle"></div>
<input id="a5Edit" name="a5Edit" value="alpha">
</li>
<li>
<div class="handle"></div>
<input id="b5Edit" name="b5Edit" value="bravo">
</li>
<li>
<div class="handle"></div>
<input id="c5Edit" name="c5Edit" value="charlie">
</li>
<li>
<div class="handle"></div>
<input id="d5Edit" name="d5Edit" value="delta">
</li>
<li>
<div class="handle"></div>
<input id="e5Edit" name="e5Edit" value="echo">
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Drag handles</td>
<td class="caption">Always editable</td>
<td class="caption"></td>
</tr>
</tbody></table>
<br>
<a name="slideshow-example"></a>
<table><tbody><tr><td>
<div id="slideEditors">
<!--
IE 5.5+ BugFix: don"t put these inside a "position: relative" layer
-->
<input id="oneEdit" name="oneEdit" class="inplace">
<input id="twoEdit" name="oneEdit" class="inplace">
<input id="threeEdit" name="oneEdit" class="inplace">
<input id="fourEdit" name="oneEdit" class="inplace">
<input id="fiveEdit" name="oneEdit" class="inplace">
<input id="sixEdit" name="oneEdit" class="inplace">
</div>
<ul id="slideshow" class="slideshow">
<li class="slide">
<div class="thumb handle"><img src="dragableSlide1.png"></div>
<div id="oneView" class="view">Slide 1</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide2.png"></div>
<div id="twoView" class="view">Slide 2</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide3.png"></div>
<div id="threeView" class="view">Slide 3</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide4.png"></div>
<div id="fourView" class="view">Slide 4</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide5.png"></div>
<div id="fiveView" class="view">Slide 5</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide6.png"></div>
<div id="sixView" class="view">Slide 6</div>
</li>
</ul>
</td></tr></tbody></table>
<br style="clear: both;">
<div id="copyright">Copyright 2005 Tim Taylor Consulting
(<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)</div>
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/edit-in-place_files.zip">edit-in-place_files.zip( 49 k)</a>
Dragged object is on top
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<body>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDOnTop.js" ></script>
<script type="text/javascript" language="JavaScript">
YAHOO.example.DDApp = function() {
var dd, dd2, dd3;
return {
init: function() {
dd = new YAHOO.example.DDOnTop("dragDiv1");
dd.addInvalidHandleId("excludeid3");
dd.addInvalidHandleClass("excludeclass2");
dd2 = new YAHOO.example.DDOnTop("dragDiv2");
// dd2.setPadding(-10);
// dd2.setXConstraint(100, 100);
// dd2.setYConstraint(0, 0);
dd3 = new YAHOO.example.DDOnTop("dragDiv3");
}
};
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
<style type="text/css">
#dragDiv1 {
background:url(./examples/dragdrop/img/sq1.png) 0 0 no-repeat;
background-color:#6D739A;top:240px; left:105px;
}
#excludeid1 {
position:absolute; top:20px; left:20px;height:20px;width:20px;
background-color:#333333;
}
#excludeid2 {
position:absolute; top:40px; left:40px;height:20px;width:20px;
background-color:#333333;
}
#excludeid3 {
position:absolute; top:60px; left:60px;height:20px;width:20px;
background-color:#333333;
}
#maskDiv {
position: absolute; top:0px; left: 0px; width:100px; height:20px;
}
#dragDiv2 {
background:url(./examples/dragdrop/img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
top:350px; left:215px;
}
#dragDiv3 {
background:url(./examples/dragdrop/img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
top:460px; left:325px;
}
</style>
<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>Dragged object is on top</h3>
<p>
This example is identical to the basic drag and drop implementation,
YAHOO.util.DD,
but we have extended it so that the square that is being dragged is positioned
on top of the others.
</p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
<div id="workArea"> </div>
<p> </p>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<div id="dragDiv1" class="testSquare">
DDOnTop
<div id="excludeid1" class="excludeclass1"> </div>
<div id="excludeid2" class="excludeclass2"> </div>
<div id="excludeid3" class="excludeclass1"> </div>
<div id="maskDiv"> </div>
</div>
<div id="dragDiv2" class="testSquare">
<a href="#">DDOnTop</a>
</div>
<div id="dragDiv3" class="testSquare">DDOnTop</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Drag inside and outside a range
/* dom-drag.js 09.25.2001 www.youngpup.net
10.28.2001 - fixed minor bug where events
sometimes fired off the handle, not the root.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>DOM Drag Demo</title>
<style type="text/css">
<!--
html, body {
height:100%;
padding:0;
margin:0;
background:white;
font:11px verdana;
}
body {
margin:15px 40px;
}
#banner {
position:absolute;
top:0px; left:0px;
height:100%;
width:19px;
}
h1 {
font:11px verdana;
font-weight:bold;
margin-top:0;
margin-bottom:1em;
color:#FB3B00;
}
#b {
cursor:move;
}
#g {
cursor:hand;
cursor:pointer;
}
#pbox {
position:absolute;
left:45px; top:40px;
width:300px; height:275px;
border:1px dashed #333399;
}
-->
</style>
<script language="javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<script language="javascript">
var reportBox, iReportCount = 0;
window.onload = function() {
if (document.all || document.getElementById)
{
var oB = document.all ? document.all["b"] : document.getElementById("b")
var oG = document.all ? document.all["g"] : document.getElementById("g")
var oP = document.all ? document.all["p"] : document.getElementById("p")
reportBox = document.all ? document.all["oReport"] : document.getElementById("oReport")
reportBox2 = document.all ? document.all["oReport2"] : document.getElementById("oReport2")
Drag.init(oB);
Drag.init(oG);
Drag.init(oP, null, 0, 274, 0, 249);
// report stuff
oB.onDragStart = function(x, y) { reportDragStart("black", x, y); }
oG.onDragStart = function(x, y) { reportDragStart("green", x, y); }
oP.onDragStart = function(x, y) { reportDragStart("purple", x, y); }
oB.onDragEnd = function(x, y) { reportDragEnd("black", x, y); }
oG.onDragEnd = function(x, y) { reportDragEnd("green", x, y); }
oP.onDragEnd = function(x, y) { reportDragEnd("purple", x, y); }
oB.onDrag = function(x, y) { reportDrag("black", x, y); }
oG.onDrag = function(x, y) { reportDrag("green", x, y); }
oP.onDrag = function(x, y) { reportDrag("purple", x, y); }
}
function reportDragStart(who, x, y) {
reportBox.value += who + " | onDragStart " + " (" + x + "," + y + ")\n"
}
function reportDragEnd(who, x, y) {
reportBox.value += who + " | onDragEnd " + " (" + x + "," + y + ")\n"
}
function reportDrag(who, x, y) {
reportBox2.value = who + " | onDrag " + " (" + x + "," + y + ")"
}
}
</script>
</head>
<body>
<div id="banner"></div>
<h1>DOM-Drag Examples: Main Features</h1>
<textarea id="oReport" style="margin-top: 320px; margin-left: 20px; width: 300px; height: 100px;" wrap="off"></textarea>
<input onmouseover="this.runtimeStyle.border="2px solid red";" id="oReport2" style="margin-left: 20px; margin-top: 5px; width: 300px;" type="text">
<!-- note that you don"t have to contain a layer like this to constrain it. the DIV is only there so i can draw a border around it. -->
<div id="pbox">
<img id="p" title="isn"t this simple pointer much better?" style="position: absolute; left: 134px; top: 156px;" src="p.gif">
</div>
<img id="b" title="these special cursors are really annoying" style="position: absolute; left: 145px; top: 118px;" src="b.gif">
<img id="g" title="please don"t use them" style="position: absolute; left: 118px; top: 131px;" src="g.gif">
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/DragDropRange.zip">DragDropRange.zip( 3 k)</a>
Drag Over Event: Drag and Drop the file over recycle bins
<html>
<head>
<title>DynAPI Examples - Drag Over Event</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.api.ext.DragEvent");
dynapi.library.include("dynapi.functions.Image");
dynapi.library.include("dynapi.functions.Color");
</script>
<script language="Javascript">
var l1,l2,l3;
var wh,lyr=dynapi.document.addChild(new DynLayer(null,500,20,150,150,"yellow"));
for(var i=0;i<10;i++){
wh=150-(i*2);
lyr=lyr.addChild(new DynLayer(null,1,1,wh,wh,dynapi.functions.getRandomColor()));
}
var file = dynapi.functions.getImage("./dynapiexamples/images/file.gif",20,24);
var bin_on = dynapi.functions.getImage("./dynapiexamples/images/bin_on.gif",32,32,{text:"Recycle",textdir:"s"});
var bin_off = dynapi.functions.getImage("./dynapiexamples/images/bin_off.gif",32,32,{text:"Bin",textdir:"s"});
var bin_full = dynapi.functions.getImage("./dynapiexamples/images/bin_full.gif",32,32,{text:"Bin Full",textdir:"s"});
l1=new DynLayer(file.getHTML(),200,80);
l2=new DynLayer("<br><center>"+bin_off.getHTML()+"</center>",250,50,100,100,"#CCFF00");
l3=new DynLayer("<br><center>"+bin_off.getHTML()+"</center>",360,50,100,100,"#ffcc00");
l4=new DynLayer("<br><center>"+bin_off.getHTML()+"</center>",10,10,100,100,"pink");
l5=new DynLayer("<br><center>"+bin_off.getHTML()+"</center>",5,5,120,120,"yellow");
lyr.addChild(l5);
lBase = new DynLayer(null,200,200,150,120,"yellow");
lBase.addChild(l4);
l1.setZIndex(100);
l1.setDragOverStealthMode(false);
DragEvent.enableDragEvents(l1)
var evt={
ondrop:function(e){
var o=e.getSource();
o.setHTML("<br><center>"+bin_full.getHTML()+"</center>");
l1.setLocation(200,80)
},
ondragover: function(e){
var o=e.getSource();
o.setHTML("<br><center>"+bin_on.getHTML()+"</center>");
},
ondragout: function(e){
var o=e.getSource();
o.setHTML("<br><center>"+bin_off.getHTML()+"</center>");
}
}
l2.addEventListener(evt);
l3.addEventListener(evt);
l4.addEventListener(evt);
l5.addEventListener(evt);
dynapi.document.addChild(l2)
dynapi.document.addChild(l3)
dynapi.document.addChild(lBase)
dynapi.document.addChild(l1)
</script>
</head>
<body>
Drag & Drop the file over recycle bins<br>
<script>
dynapi.document.insertAllChildren();
</script>
<p>
<a href="javascript:;" onclick="l1.setDragOverStealthMode(true);">Activate Stealth Mode</a><br>
<a href="javascript:;" onclick="l1.setDragOverStealthMode(false);">Deactivate Stealth Mode</a>
</p>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Drag still
/* CopyRight. www.youngpup.net*/
<html>
<head>
<script language="javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<script language="javascript">
Drag.init(document.getElementById("p"), null, null, null, null, null, false, true);
Drag.init(document.getElementById("g"), null, null, null, null, null, true, true);
Drag.init(document.getElementById("b"), null, null, null, null, null, false, false);
</script></head>
<body>
<img id="p" src="p.gif" style="position: absolute; left: 50px; bottom: 20px;">
<img id="g" src="g.gif" style="position: absolute; right: 20px; bottom: 100px;">
<img id="b" src="b.gif" style="position: absolute; left: 60px; top: 20px;">
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/DragStill.zip">DragStill.zip( 2 k)</a>
Drag within a range 2
/* dom-drag.js 09.25.2001 www.youngpup.net
10.28.2001 - fixed minor bug where events
sometimes fired off the handle, not the root.
*/
<html>
<head>
<script language="javascript">
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
};
</script>
<script language="javascript">
window.onload = function() {
Drag.init(document.getElementById("p"), null, null, null, null, null, false, false, null, mySin);
}
function mySin(x) {
return Math.round(Math.sin((x - 20) / 10) * 10) + 50;
}
</script></head>
<body>
<img id="p" src="p.gif" style="position: absolute; left: 237px; top: 53px;">
</body></html>
DynAPI Examples - Drag Drop /w Collision Detection
<html>
<head>
<title>DynAPI Examples - Drag Drop /w Collision Detection</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.api.ext.DragEvent");
dynapi.library.include("dynapi.fx.MotionX");
dynapi.library.include("dynapi.functions.Color");
</script>
<script language="Javascript">
var l1,l2,l3;
l1=new DynLayer(null,50,50,50,50,"yellow");
l2=new DynLayer(null,250,50,100,100,"green");
l3=new DynLayer(null,250,200,100,100,"blue");
l1.makeSolid();
l2.makeSolid();
l3.makeSolid();
l1.setZIndex(100);
DragEvent.enableDragEvents(l1)
// note: click event added to l1
l1.addEventListener({
oncollide:function(e){
var o=e.getSource();
var c=o.getObstacle();
c.setBgColor(dynapi.functions.getRandomColor());
},
ondragend:function(e){
var o=e.getSource();
var c=o.getObstacle();
if(c) c.setHTML(new Date());
}
});
dynapi.document.addChild(l1)
dynapi.document.addChild(l2)
dynapi.document.addChild(l3)
</script>
</head>
<body>
Drag & Drop the Yellow Layer over the Red and Green layers
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Yahoo! UI Library - Drag and Drop 1
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<body>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd, dd2, dd3;
return {
init: function() {
dd = new YAHOO.util.DD("dragDiv1");
/*
dd.onDragDrop = function(e, id) {
var draggedEl = this.getEl();
var targetedEl = document.getElementById(id);
var DOM = YAHOO.util.Dom;
DOM.setX(draggedEl, DOM.getX(targetedEl));
};
*/
dd2 = new YAHOO.util.DD("dragDiv2");
dd3 = new YAHOO.util.DD("dragDiv3");
}
}
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
<style type="text/css">
#dragDiv1 {
background:url(./examples/dragdrop/img/sq1.png) 0 0 no-repeat;
background-color:#6D739A;top:240px; left:105px;
}
#dragDiv2 {
background:url(./examples/dragdrop/img/sq2.png) 0 0 no-repeat;
background-color:#566F4E;top:350px; left:215px;
}
#dragDiv3 {
background:url(./examples/dragdrop/img/sq3.png) 0 0 no-repeat;
background-color:#7E5B60;top:460px; left:325px;
}
</style>
<div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>Basic Implementation of YAHOO.util.DragDrop</h3>
<p>
In this implementation of YAHOO.util.DragDrop, we keep track of the position of the clicked element
so that we can move it along with cursor during the drag operation, maintaining the relationship
between the location of the element and the location of the click.
This class also provides a way to
define other elements that modify the way the drag operation works. </p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<div id="dragDiv1" class="testSquare" >YAHOO.util.DD</div>
<div id="dragDiv2" class="testSquare" >YAHOO.util.DD</div>
<div id="dragDiv3" class="testSquare" >YAHOO.util.DD</div>
<form name="formTest" action="http://www.yahoo.ru" method="get">
<!--
<input type="text" id="txtTest" />
-->
<script>
//YAHOO.util.Event.addListener("txtTest","keypress",txtTest_keydown);
/*
function txtTest_keydown (e) {
YAHOO.util.Event.stopEvent(e);
alert(YAHOO.util.Event.getCharCode(e));
// return false;
}
*/
</script>
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Drag and Drop 2
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<body>
<style type="text/css">
body { background: url("./examples/dragdrop/img/grid.png") }
#dragDiv1 {
background:url(./examples/dragdrop/img/sq1.png) 0 0 no-repeat;background-color:#6D739A;
top:237px; left:113px;border:0px solid white;
}
#dragDiv2 {
background:url(./examples/dragdrop/img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
top:362px; left:238px; border:0px solid white;
}
#dragDiv3 {
background:url(./examples/dragdrop/img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
top:487px; left:363px; border:0px solid white;
}
</style>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd, dd2, dd3;
return {
init: function() {
dd = new YAHOO.util.DD("dragDiv1");
dd.setXConstraint(1000, 1000, 25);
dd.setYConstraint(1000, 1000, 25);
dd2 = new YAHOO.util.DD("dragDiv2");
dd2.setXConstraint(1000, 1000, 25);
dd2.setYConstraint(1000, 1000, 25);
dd3 = new YAHOO.util.DD("dragDiv3");
dd3.setXConstraint(1000, 1000, 25);
dd3.setYConstraint(1000, 1000, 25);
}
};
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
v
<div id="pageTitle">
<h3>Drag and Drop - YAHOO.util.DD</h3>
</div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>YAHOO.util.DD Grid</h3>
<p> </p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<div id="dragDiv1" class="testSquare">YAHOO.util.DD</div>
<div id="dragDiv2" class="testSquare">YAHOO.util.DD</div>
<div id="dragDiv3" class="testSquare">YAHOO.util.DD</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Drag and Drop 3
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript">
var dd, dd2, dd3;
function dragDropInit() {
dd = new YAHOO.util.DragDrop("dragDiv1");
dd2 = new YAHOO.util.DragDrop("dragDiv2");
dd3 = new YAHOO.util.DragDrop("dragDiv3");
}
YAHOO.util.Event.addListener(window, "load", dragDropInit);
</script>
<body>
<div id="pageTitle">
<h3>Drag and Drop - YAHOO.util.DragDrop</h3>
</div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>No Implementation</h3>
<p>By implementing the base drag and drop class, the manager class will
keep track of the element"s virtual position, but not actually move anything.
You can click on any of the
three squares and watch the various events that the Drag and Drop Manager fires in
logger window. </p>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<div id="dragDiv1" class="testSquare" style="background:url(./examples/dragdrop/img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:240px; left:105px ">DragDrop</div>
<div id="dragDiv2" class="testSquare" style="background:url(./examples/dragdrop/img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">DragDrop</div>
<div id="dragDiv3" class="testSquare" style="background:url(./examples/dragdrop/img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:460px; left:325px">DragDrop</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Drag and Drop 5
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDOnTop.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd, dd3, logger;
return {
init: function() {
dd = new YAHOO.example.DDOnTop("dragDiv1");
dd.setHandleElId("handle1");
dd.setHandleElId("handle2");
dd3 = new YAHOO.util.DDTarget("dragDiv3");
}
};
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
<body>
<div id="pageTitle">
<h3>Drag and Drop - DD, DDTarget</h3>
</div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
<h3>Multiple Drag Handles</h3>
<p>
</p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<div id="dragDiv1" style="position:absolute;color:white;background-color:#594178;top:240px; left:105px;height:200px;width:200px;z-index:2;padding:4px">
<div id="handle1" style="text-align:center;margin-right:14px;cursor:move;float:left;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle1</div>
<div id="handle2" style="text-align:center;cursor:move;float:right;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle2</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec turpis. Vestibulum gravida suscipit libero. Integer id sapien. Nullam tempus, lorem quis rutrum consectetuer, erat massa vehicula nisl, eu pulvinar lacus diam ac orci
</p>
</div>
<div id="dragDiv3" class="testSquare" style="background-color:#000000;top:460px; left:325px;cursor:default;z-index:0">DDTarget</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Yahoo! UI Library - Drag and Drop: Resize
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
</head>
<body>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/DDResize.js" ></script>
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd, dd2, dd3;
return {
init: function() {
dd = new YAHOO.example.DDResize("panelDiv", "handleDiv", "panelresize");
dd2 = new YAHOO.util.DD("panelDiv", "paneldrag");
dd2.addInvalidHandleId("handleDiv");
}
};
} ();
function testclick(e) {
alert("click");
}
// var resizer_dd1 = new YAHOO.util.DD("theimage");
// resizer_dd1.setYConstraint(0,0);
// YAHOO.util.Event.addListener("theimage", "mousedown", testclick);
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
</script>
<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>
<img id="ylogo" src="./examples/dragdrop/img/logo.gif" />
<div id="container">
<div id="containerTop">
<div id="header">
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
</h4>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="dragDropForm" action="javscript:;">
<h3>Resize</h3>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
<div id="panelDiv">
<div id="handleDiv"></div>
</div>
<p> </p>
</form>
</div>
<style type="text/css">
#panelDiv {
position:relative;
height: 300px;
width: 150px;
top:80px;
left:105px;
border:1px solid #333333;
background-color: #f7f7f7;
}
#handleDiv {
position: absolute;
bottom:0px;
right: 0px;
width:10px;
height:10px;
background-color:blue;
font-size: 1px;
}
#theimage {
position:absolute;top:10px;left:10px;
}
</style>
<!--
<table>
<tr>
<td>
<img id="theimage" src="img/lthumb.png" />
</td>
</tr>
</table>
-->
<!--
<div id="theimage" style="position:absolute;top:50px;height:10px;width:10px;background-color:red">asdf</div>
-->
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
