Skip to content

Instantly share code, notes, and snippets.

@julsfelic
Created April 22, 2013 17:22
Show Gist options
  • Save julsfelic/5436895 to your computer and use it in GitHub Desktop.
Save julsfelic/5436895 to your computer and use it in GitHub Desktop.
Drag and Drop script with custom events
var DragDrop = function() {
var dragdrop = new EventTarget(),
dragging = null,
diffX = 0,
diffY = 0;
function handleEvent(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(event.type) {
case "mousedown":
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY = target.offsetTop;
dragdrop.fire({
type: "dragstart",
target: dragging,
x: event.clientX,
y: event.clientY
});
}
break;
case "mousemove":
if (dragging !== null) {
dragging.style.left = (event.clientX - diffX) + "px";
draggin.style.top = (event.clientY - diffY) + "px";
dragdrop.fire({
type: "drag",
target: dragging,
x: event.clientX,
y: event.clientY
});
}
break;
case "mouseup":
dragdrop.fire({
type: "dragend",
target: dragging,
x: event.clientX,
y: event.clientY
});
dragging = null;
break;
}
}
dragdrop.enable = function() {
Event.Util.addHandler(document, "mousedown", handleEvent);
Event.Util.addHandler(document, "mousemove", handleEvent);
Event.Util.addHandler(document, "mouseup", handleEvent);
};
dragdrop.disable = function() {
Event.Util.removeHandler(document, "mousedown", handleEvent);
Event.Util.removeHandler(document, "mousemove", handleEvent);
Event.Util.removeHandler(document, "mouseup", handleEvent);
};
return dragdrop;
}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment