Содержание

1 Crop an image
2 DOM-Drag Examples: Cropper
3 Drag & Drop Sortable Lists with JavaScript and CSS
4 Dragging with JavaScript
5 Edit in Place with JavaScript and CSS
6 Edit in Place with JavaScript and CSS
7 DOM-Drag Examples: Main Features

Crop an image

   <source lang="html4strict">
/* 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">

</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>

DOM-Drag Examples: Cropper

 <img src="snare_pic_large-300.jpg">

   <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">

this was <a href="http://www.styrofirm.ru/" target="_blank">jody"s</a> idea.

</body></html>

      </source>

Display Drag Icon in drag and drop

   <source lang="html4strict">

<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

<a href="javascript:;" onclick="changeIcon()">Change Lime Source Drag Icon<a> </body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Dragable float window with scrollable text inside

   <source lang="html4strict">
/* 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>

Handle

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.

</body></html>

      </source>

Dragable sorted list

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html><head><title>Drag & Drop Sortable Lists with JavaScript and CSS</title>

 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>

 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"> </style>

/

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>

 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>

 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>

 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>

 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>

 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>

/

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"> </script></head>

<body>

Drag & Drop Sortable Lists with JavaScript and CSS

rearrange the items:</p>

one
two
three

In Firefox you can also drag the bullet to move an item. Keen.

Saving the reorderd list 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.

Example: Add Some Style

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).

alpha bravo charlie	alpha bravo charlie	bravo alpha charlie
no margin on list items	4px bottom margin on list items. Firefox exhibits bug when dragging.	Firefox workaround: -4px top margin on list, 4px top margin on list items.

This next list is intentionally long to see how well the technique scales up and uncover other interaction issues.

alpha
bravo
charlie
delta
echo
foxtrot
golf
hotel
india
juliet
kilo
lima
mike
november
oscar
papa
quebec
romeo
sierra
yankee
tango
uniform
victor
whiskey
xray
zulu

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.

Example: Sorting in two dimensions

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 does it all. Amazing!

A
B
C
D
E
F
G
H
I
J
K
L
M
O
P
Q
R
S
T
U
V
W
X
Y
Z
N

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.

Example: Sortable links or buttons

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.

<a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Save</a>
<a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Cancel</a>
<a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Preview</a>
<a href="#" onclick="speak("buttonsStatus", this.innerHTML); return false;">Print</a>

</body></html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/sorting_files.zip">sorting_files.zip( 12 k)</a>

Dragable transparent window

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>Dragging with JavaScript</title>

 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>

/

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>

 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>

 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>

 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>

 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"> </script></head>

<body>

Dragging with JavaScript

drag to move

drag handle to move

drag to move

vertical constraint

drag to move

horizontal constraint

drag to move

contrained to region

drag to move

exaggerated drag threshold

drag to move

absolutely positioned, constrained vertically and within visible area

</body></html>

      </source>

Drag and drop custom window with title bar

   <source lang="html4strict">
/* 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>

Handle

 var theHandle = document.getElementById("handle");
 var theRoot   = document.getElementById("root");
 Drag.init(theHandle, theRoot);

</script> </body></html>

      </source>

Drag and Drop - DDProxy

   <source lang="html4strict">

<!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>

   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>

Drag and Drop - DDProxy

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>

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

Proxy

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>

The logger is paused for performance reasons. Click "Resume" to re-enable it.

   </form>

DDSwap

a custom proxy element

</body> </html>

      </source>

Drag and Drop: Multiple groups, targetable affordance

   <source lang="html4strict">

 <!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="./examples/dragdrop/js/DDPlayer.js" ></script>

   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>

Drag and Drop - DDProxy

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>

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

Multiple groups, targetable affordance

Mode: <select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex"> <option value="0" selected>Point</point> <option value="1">Intersect</point> </select>

The logger is paused for performance reasons. Click "Resume" to re-enable it.

   </form>

   .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>

1

2

3

4

5

6

1

2

3

4

5

6

</body> </html>

      </source>

Drag and Drop to sort lists

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html><head><title>Edit in Place with JavaScript and CSS</title>

<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>

 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"></style>

/

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>

 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>

 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>

 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>

 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>

 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"> </script></head>

<body>

Edit in Place with JavaScript and CSS

Editable Content

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.

Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.

We can do paragraphs, styling, <a href="http://tool-man.org/examples/index.html">links</a>, or any HTML, really.

	DADA	NHUG	TTAY
DADA		1	3
NHUG	1		2
TTAY	3	2

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>.

Sortable, Editable Lists

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.

List 1	List 2	List 3
alpha bravo charlie delta echo	<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"> alpha bravo charlie delta echo	<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"> bravo charlie delta alpha echo
Sort only	Sort and edit (double click)	Sort and edit (single click)
List 4	List 5
<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"> alpha bravo charlie delta echo	<input id="a5Edit" name="a5Edit" value="alpha"> <input id="b5Edit" name="b5Edit" value="bravo"> <input id="c5Edit" name="c5Edit" value="charlie"> <input id="d5Edit" name="d5Edit" value="delta"> <input id="e5Edit" name="e5Edit" value="echo">
Drag handles	Always editable

 <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">

<img src="dragableSlide1.png">

Slide 1
<img src="dragableSlide2.png">

Slide 2
<img src="dragableSlide3.png">

Slide 3
<img src="dragableSlide4.png">

Slide 4
<img src="dragableSlide5.png">

Slide 5
<img src="dragableSlide6.png">

Slide 6

</body></html>

      </source>

<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

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html><head><title>Edit in Place with JavaScript and CSS</title>

<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>

 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"></style>

/

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>

 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>

 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>

 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>

 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>

 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"> </script></head>

<body>

Edit in Place with JavaScript and CSS

Editable Content

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.

Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.

We can do paragraphs, styling, <a href="http://tool-man.org/examples/index.html">links</a>, or any HTML, really.

	DADA	NHUG	TTAY
DADA		1	3
NHUG	1		2
TTAY	3	2

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>.

Sortable, Editable Lists

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.

List 1	List 2	List 3
alpha bravo charlie delta echo	<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"> alpha bravo charlie delta echo	<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"> bravo charlie delta alpha echo
Sort only	Sort and edit (double click)	Sort and edit (single click)
List 4	List 5
<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"> alpha bravo charlie delta echo	<input id="a5Edit" name="a5Edit" value="alpha"> <input id="b5Edit" name="b5Edit" value="bravo"> <input id="c5Edit" name="c5Edit" value="charlie"> <input id="d5Edit" name="d5Edit" value="delta"> <input id="e5Edit" name="e5Edit" value="echo">
Drag handles	Always editable

 <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">

<img src="dragableSlide1.png">

Slide 1
<img src="dragableSlide2.png">

Slide 2
<img src="dragableSlide3.png">

Slide 3
<img src="dragableSlide4.png">

Slide 4
<img src="dragableSlide5.png">

Slide 5
<img src="dragableSlide6.png">

Slide 6

</body></html>

      </source>

<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

   <source lang="html4strict">

<!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="./examples/dragdrop/js/DDOnTop.js" ></script>

   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>

Drag and Drop - DD

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>

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

Dragged object is on top

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.

The logger is paused for performance reasons. Click "Resume" to re-enable it.

   </form>

       DDOnTop

       <a href="#">DDOnTop</a>

DDOnTop

 </body>

</html>

      </source>

Drag inside and outside a range

   <source lang="html4strict">
/* 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">

</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>

DOM-Drag Examples: Main Features

 <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">

   <img id="p" title="isn"t this simple pointer much better?" style="position: absolute; left: 134px; top: 156px;" src="p.gif">

 <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>

      </source>

<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

   <source lang="html4strict">

<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("
"+bin_off.getHTML()+"",250,50,100,100,"#CCFF00"); l3=new DynLayer("
"+bin_off.getHTML()+"",360,50,100,100,"#ffcc00"); l4=new DynLayer("
"+bin_off.getHTML()+"",10,10,100,100,"pink"); l5=new DynLayer("
"+bin_off.getHTML()+"",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("
"+bin_full.getHTML()+"");

     l1.setLocation(200,80)
   },
   ondragover: function(e){
     var o=e.getSource();

o.setHTML("
"+bin_on.getHTML()+"");

   },
   ondragout: function(e){
     var o=e.getSource();

o.setHTML("
"+bin_off.getHTML()+"");

   }
 }
 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
<script>

 dynapi.document.insertAllChildren();

</script>

<a href="javascript:;" onclick="l1.setDragOverStealthMode(true);">Activate Stealth Mode</a>
<a href="javascript:;" onclick="l1.setDragOverStealthMode(false);">Deactivate Stealth Mode</a>

</body> </html>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Drag still

   <source lang="html4strict">
/* 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>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/DragStill.zip">DragStill.zip( 2 k)</a>

Drag within a range 2

   <source lang="html4strict">

/* 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>

      </source>

DynAPI Examples - Drag Drop /w Collision Detection

   <source lang="html4strict">

<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>

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Yahoo! UI Library - Drag and Drop 1

   <source lang="html4strict">

 <!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>

Drag and Drop - YAHOO.util.DD

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>

Examples

   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>

Basic Implementation of YAHOO.util.DragDrop

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.

The logger is paused for performance reasons. Click "Resume" to re-enable it.

</form>

YAHOO.util.DD

/* function txtTest_keydown (e) {

   YAHOO.util.Event.stopEvent(e);                                                                                                                   
   alert(YAHOO.util.Event.getCharCode(e));                                                                                                       
   // return false;

}

/

</script> </form>

</body> </html>

      </source>

Yahoo! UI Library - Drag and Drop 2

   <source lang="html4strict">

<!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

Drag and Drop - YAHOO.util.DD

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>

Examples

   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>

 <form name="dragDropForm" action="javscript:;">

YAHOO.util.DD Grid

The logger is paused for performance reasons. Click "Resume" to re-enable it.

 </form>

YAHOO.util.DD

</body> </html>

      </source>

Yahoo! UI Library - Drag and Drop 3

   <source lang="html4strict">
 <!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>

 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>

Drag and Drop - YAHOO.util.DragDrop

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>

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

No Implementation

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.

 </form>

DragDrop

   </body>
 </html>

      </source>

Yahoo! UI Library - Drag and Drop 5

   <source lang="html4strict">

 <!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>

   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>

Drag and Drop - DD, DDTarget

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" />

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

Multiple Drag Handles

The logger is paused for performance reasons. Click "Resume" to re-enable it.

   </form>

handle1

handle2

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

DDTarget

 </body>

</html>

      </source>

Yahoo! UI Library - Drag and Drop: Resize

   <source lang="html4strict">

<!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="./examples/dragdrop/js/DDResize.js" ></script>

   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>

Drag and Drop - DD

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>

Examples

   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>

   <form name="dragDropForm" action="javscript:;">

Resize

The logger is paused for performance reasons. Click "Resume" to re-enable it.

   </form>

   #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>

</body> </html>

      </source>

JavaScript DHTML/GUI Components/Drag Drop

Содержание

Crop an image

DOM-Drag Examples: Cropper

Display Drag Icon in drag and drop

Dragable float window with scrollable text inside

Dragable sorted list

Drag & Drop Sortable Lists with JavaScript and CSS

Example: Add Some Style

Example: Sorting in two dimensions

Example: Sortable links or buttons

Dragable transparent window

Dragging with JavaScript

Drag and drop custom window with title bar

Drag and Drop - DDProxy

Drag and Drop - DDProxy

Examples

Proxy

Drag and Drop: Multiple groups, targetable affordance

Drag and Drop - DDProxy

Examples

Multiple groups, targetable affordance

Drag and Drop to sort lists

Edit in Place with JavaScript and CSS

Editable Content

Sortable, Editable Lists

Drag and Drop to sort slides

Edit in Place with JavaScript and CSS

Editable Content

Sortable, Editable Lists

Dragged object is on top

Drag and Drop - DD

Examples

Dragged object is on top

Drag inside and outside a range

DOM-Drag Examples: Main Features

Drag Over Event: Drag and Drop the file over recycle bins

Drag still

Drag within a range 2

DynAPI Examples - Drag Drop /w Collision Detection

Yahoo! UI Library - Drag and Drop 1

Drag and Drop - YAHOO.util.DD

Examples

Basic Implementation of YAHOO.util.DragDrop

Yahoo! UI Library - Drag and Drop 2

Drag and Drop - YAHOO.util.DD

Examples

YAHOO.util.DD Grid

Yahoo! UI Library - Drag and Drop 3

Drag and Drop - YAHOO.util.DragDrop

Examples

No Implementation

Yahoo! UI Library - Drag and Drop 5

Drag and Drop - DD, DDTarget

Examples

Multiple Drag Handles

Yahoo! UI Library - Drag and Drop: Resize

Drag and Drop - DD

Examples

Resize

Навигация

Поиск