Core Docs | Additional Modules Docs

sb.drag


@Description: Used by Element.prototype.makeDraggable.
An event handler which makes DOM nodes draggable. Any super element (from sb.element or $) can become draggable using this. Draggable elements have three additional methods and two setting. The additional methods are ondragstop, ondragstart, and ondrag. The properties are lockX and lockY. Any element within the element being set as draggable that has a className which contains "dragHandle" is set as the handle to drag the object with. Items can have multiple handles.
@File: drag.js
@Author: Paul Visco v1.02 09/02/06 12/15/08
@Example:
<div id="dragme" class="dragPaper" ><p class="dragHandle" style="background-color:red;border:1px solid black;">Drag From Here</p><p>Here is an drag box with a handle and some text</p></div>
var draggableThing = $('#dragme');
draggableThing.makeDraggable();

//to stop this element from being draggable
//draggableThing.makeUnDraggable();

//the this refers to the element being dragged
draggableThing.ondrag = function(e, pos){
    document.title = e.clientX;
};

//the this referes to the element being dragged
draggableThing.ondragstop = function(e){
    document.title = e.clientX;
};

//the this referes to the element being dragged
draggableThing.ondragstart = function(e){
    document.title = e.clientX;
};

//locks the x axis from being dragged e.g. only drags up and down
draggableThing.lockX=1;

//locks the y axis from being dragged e.g. only drags left to right
draggableThing.lockY=1;