I know there are plenty of JavaScript packages out there to allow you to create draggable elements on your HTML page, but to me, most of them appear to be overly complicated for a simple function and are often part of a larger framework that you may not need. The solution I'm providing today does depends on the prototype.js package (I'm using version 1.5 currently) which allows the code size to stay smaller. Here's how to make any HTML element draggable in 5 easy steps.
- Add the class of
draggableto whatever you want to move. Actually, you can use any class identifier you want, butdraggableis what I'm looking for in my code. - Give your
draggableelement apositionstyle (position: absolute;orposition: relative;) and an initialtopandleftvalue. Generally, you'd want to put this in your styles in an external CSS with thedraggableclass, but thetopandleftvalues need to be set as an attribute in the HTML. Hint: setting thepositiontorelativewith thetopandleftvalues set to0pxwill allow it to start located where it normally would be in the browser. You'll probably want to give it a higherz-indexand solidbackground-coloras well, but that's up to you. - Include the 3 drag event handling functions I'll describe below in your code somewhere
- Register all your
draggableelements to the event listeners. - Have fun dragging window elements around.
The event handlers
Before you can use the following functions, you need to define some variables to hold some information during the drag. If you make the subsequent functions part of another containing object, you can simply prepend all occurrences of these variables in the functions withthis. and they will be stored in the containing object instead.
var dragObj; var cursorStartX; var cursorStartY; var elementStartX; var elementStartY; var dragGofn; var dragStopfn;
startDrag
startDrag will initialize a mouse drag event. It captures the initial location of the mouse when beginning the drag in order to calculate movement later. It also captures the current coordinates of the dragged element for correct positioning as the location of the mouse are most likely not the origin of the element being dragged. Finally, it associates the additional event observers to the element to capture the mouse movement (onmousemove) and release of the mouse button (onmouseup).
function startDrag(event) {
dragObj = Event.element(event);
// if the target of the event is not a "draggable" element, then search
// through it's parents for an element that is draggable.
// if we can't find a draggable element before reaching the root document
// element, then bail out
while (!Element.hasClassName(dragObj,"draggable")) {
dragObj = $(dragObj).up('.draggable');
}
cursorStartX = Event.pointerX(event);
cursorStartY = Event.pointerY(event);
elementStartX = parseInt(dragObj.style.left, 10);
elementStartY = parseInt(dragObj.style.top, 10);
Event.observe(dragObj, 'mousemove', dragGofn);
Event.observe(dragObj, 'mouseup', dragStopfn);
}
dragGo
Once the drag event has been initiated by thestartDrag function, the dragGo function will update the location of the element being dragged so that it moves around the screen with the mouse.
function dragGo(event) {
var x, y;
x = Event.pointerX(event);
y = Event.pointerY(event);
// move the target object
dragObj.style.left = (x - cursorStartX + elementStartX) + "px";
dragObj.style.top = (y - cursorStartY + elementStartY) + "px";
Event.stop(event);
}
dragStop
Once the user has release the mouse button, we need to stop observing the mouse movements, so thedragStop function will un-register the event handlers.
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
Event.stopObserving(dragObj, 'mousemove', dragGofn);
Event.stopObserving(dragObj, 'mouseup', dragStopfn);
dragObj = null;
Event.stop(event);
}
Registering the draggable elements
You're almost ready to start moving items on the screen, but first you have to register all your draggable elements to the startDrag function so that they will be notified of the drag events. So, we utilize prototype's element-by-classname selector to find all the draggable elements and associate the event listener to them.
Note: in order to un-register the event listeners, you have to have the handle to the event listener you used to register it originally. Thus, we used the variables dragGofn and dragStopfn to register and un-register the event listeners. These variables are defined here during the original event registration.
function registerEvents() {
dragGofn = dragGo.bindAsEventListener();
dragStopfn = dragStop.bindAsEventListener();
$$(".draggable").each(function(draggableElem) {
Event.observe(draggableElem, 'mousedown', startDrag.bindAsEventListener(), true);
});
}
Note: the final true on the Event.observe tells prototype to request capturing instead of bubbling. This is necessary for this function to work in Safari (see Kir's blog (http://kirblog.idetalk.com/2006/06/safari-javascript-problems.html))
) on the right side of the text. The background color is white with a double gray border and large, bold font.