An extension to the base Drag class with additional functionality for dragging an Element. Supports snapping and droppables. Inherits methods, properties, options and events from Drag.

Demos

Note

Drag.Move requires the page to be in Standards Mode.

Syntax

var myMove = new Drag.Move(myElement[, options]);

Arguments

  1. el - (element) The Element to apply the drag to.
  2. options - (object, optional) The options object. See below.

Options

All the base Drag options, plus:

  • container - (element) If an Element is passed, drag will be limited to the passed Element's size and position.
  • droppables - (array, string) The Elements or a CSS selector that the draggable can drop into. The class's drop, enter, and leave events will be fired in conjunction with interaction with one of these elements.
  • precalculate - (boolean; defaults to false) If true, the class will calculate the locations and dimensions of the droppables which will increase performance. If the droppables are likely to change shape, size, or location it is best to leave this as false.
  • includeMargins - (boolean; defaults to true) This option only applies when the container option is set. If true (the default) the margins are included in the calculations for the bounding box of the draggable item. This means that if you have a margin on your draggable then the border of the draggable can never touch the edge of the container. Setting it to false ignores this margin.
  • checkDroppables - (boolean; defaults to true) Checks against the droppables on drag if true.

Events

  • drop - Executed when the element drops. Passes as argument the element and the element dropped on and the event. If dropped on nothing, the second argument is null.
  • leave - Executed when the element leaves one of the droppables.
  • enter - Executed when the element enters one of the droppables.

Example

var myDrag = new Drag.Move('draggable', {

    droppables: '.droppable',

    onDrop: function(element, droppable, event){
        if (!droppable) console.log(element, ' dropped on nothing');
        else console.log(element, 'dropped on', droppable, 'event', event);
    },

    onEnter: function(element, droppable){
        console.log(element, 'entered', droppable);
    },

    onLeave: function(element, droppable){
        console.log(element, 'left', droppable);
    }

});

Notes

  • Drag.Move requires the page to be in Standards Mode.
  • Drag.Move supports either position absolute or relative. If no position is found, absolute will be set.

See Also

Fires the 'drop' event and calls the Drag Class stop method.

Syntax

myMove.stop();

Example

var myMove = new Drag.Move(myElement, {
    onSnap: function(){ // due to MooTool's inheritance, all [Drag][]'s Events are also available.
        this.moved = this.moved || 0;
        this.moved++;
        if (this.moved > 1000){
            alert("You've gone far enough.");
            this.stop();
        }
    }
});

See Also

Limits drag to an Element's size and position. This is equivalent to specify the container option in Drag.Move constructor.

Syntax

myMove.setContainer(container);

Arguments

  1. container - (element) Sets the container Element, drag will be limited to this Element's size and position.

Custom Type to allow all of its methods to be used with any DOM element via the dollar function $.

Adds drag-to-move behavior to an Element using supplied options.

Syntax

var myDrag = myElement.makeDraggable([options]);

Arguments

  1. options - (object, optional) See Drag and Drag.Move for acceptable options.

Returns

  • (object) The Drag.Move instance that was created.

Example

var myDrag = $('myElement').makeDraggable({
    onComplete: function(){
        alert('done dragging');
    }
});

See Also