Yahoo! UI Library - Drag and Drop
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);
#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;
}
Drag and Drop - YAHOO.util.DD
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.