I implemented the OpenRico? Drag&Drop with MochiKit, trying to improve it a bit and adjusting it for my needs. It can be customizes easily for giving it more flexibility.
It needs the following modifications in DOM.js, as seen in #4 :
MochiKit.DOM.asEventListener = function (func) {
return function (e) {
func.call(this, e || event);
};
};
MochiKit.DOM.addEventListener = function (element, action, func) {
var listener = MochiKit.DOM.asEventListener(func);
element = MochiKit.DOM.getElement(element);
if (element.addEventListener) {
element.addEventListener(action, listener, false);
} else if (element.attachEvent) {
element.attachEvent("on" + action, listener);
}
return listener;
};
A simple example :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drag and Drop example</title>
<script type="text/javascript" src="scripts/lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="scripts/lib/MochiKit/DragAndDrop.js"></script>
</head>
<body>
<div id="drag-1">Drag Me !</div>
<div id="drag-2">Drag Me too !</div>
<div id="drop-1">Drop on Me!</div>
<script type="text/javascript">
MochiKit.DragAndDrop.registerDraggable(new MochiKit.DragAndDrop.Draggable('drag-1'));
MochiKit.DragAndDrop.registerDraggable(new MochiKit.DragAndDrop.Draggable('drag-2'));
MochiKit.DragAndDrop.registerDropZone(new MochiKit.DragAndDrop.DropZone('drop-1'));
</script>
</body>
</html>
A full featured example, overriding some functions (it can be seen here: http://www.nimail.org/docs/model/mailbox_mochi.html) :
var MailDraggable = function (htmlElement, parentElement, options) {
this.parentElement = parentElement;
this.__init__(htmlElement, options);
};
MailDraggable.prototype = merge(MochiKit.DragAndDrop.Draggable.prototype, {
"clear": function() {
document.getElementById("tbody").removeChild(document.getElementById(this.parentElement));
},
"select": function() {
this.selected = true;
if (this.showingSelected) {
return;
}
var htmlElement = this.getMouseDownHTMLElement();
this.saveBackground = MochiKit.Visual.getElementsComputedStyle(htmlElement, "backgroundColor", "background-color");
htmlElement.style.backgroundColor = "transparent";
this.showingSelected = true;
},
"getObjectDragGUI": function() {
return this.htmlElement.cloneNode(true);
}
});
var FolderDropZone = function(htmlElement, options) {
this.__init__(htmlElement, options);
}
FolderDropZone.prototype = merge(MochiKit.DragAndDrop.DropZone.prototype, {
"accept": function(draggableObjects) {
for (var i = 0; i < draggableObjects.length; i++ ) {
draggableObjects[i].clear();
}
}
});
MochiKit.DragAndDrop.registerDraggable(new MailDraggable('drag-1', 'tr-1'));
MochiKit.DragAndDrop.registerDraggable(new MailDraggable('drag-2', 'tr-2'));
MochiKit.DragAndDrop.registerDropZone(new FolderDropZone('drop-1', {'hoverClass': 'drop-hover'}));
Attachments
- DragAndDrop.js (32.6 KB) - added by anonymous 4 years ago.
