Class: Drag.Move

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.

Note:

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

Drag.Move Method: constructor

Синтаксис:

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

Аргументы:

  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) The Elements 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.

Events:

  • drop - Executed when the element drops. Passes as argument the element and the element dropped on. 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.

Пример:

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

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

 
    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.

Demos:

Смотрите также:

Drag.Move Method: stop

Checks if the Element is above a droppable and fires the drop event. Else, fires the 'emptydrop' event that is attached to this Element. Lastly, calls the Drag Class stop method.

Синтаксис:

myMove.stop();

Пример:

var myElement = $('myElement').addEvent('emptydrop', function(){

    alert('no drop occurred');
});
 
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();
        }
    }

});

Смотрите также:

Native: Element

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

Element Method: makeDraggable

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

Синтаксис:

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

Аргументы:

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

Возвращает:

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

Пример:

var myDrag = $('myElement').makeDraggable({

    onComplete: function(){
        alert('done dragging');
    }
});

Смотрите также:


Эта документация распостраняется на правах Attribution-NonCommercial-ShareAlike 3.0 License.
Оригинал документации на английском.
© Linux.ria.ua, 2008-2024