Class: Drag.Move

Розширення базового класу Drag з додатковою функціональністю для перетягування Element. Підтримує прилипання та зони скидання. Успадковує методи, властивості, опції та події від Drag.

Примітка:

Drag.Move вимагає, щоб сторінка була в Standards Mode.

Drag.Move Method: constructor

Синтаксис:

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

Аргументи:

1. el - (element) Елемент Element, до якого застосовується перетягування.
2. options - (object, опціонально) Об'єкт опцій. Див. нижче.

Опції:

Всі базові опції Drag, плюс:

• container - (element) Якщо переданий Element, перетягування буде обмежено розміром та позицією переданого Element.
• droppables - (array) Elements, в які можна скинути перетягуваний елемент. Події drop, enter та leave класу будуть викликані при взаємодії з одним з цих елементів.

Події:

• drop - Виконується, коли елемент скидається. Передає як аргумент елемент та елемент, на який скинули. Якщо скинуто на нічого, другий аргумент є null.
• leave - Виконується, коли елемент залишає одну з зон скидання.
• enter - Виконується, коли елемент входить в одну з зон скидання.

Приклад:

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);
    }

 
});

Примітки:

• Drag.Move вимагає, щоб сторінка була в Standards Mode.
• Drag.Move підтримує або position absolute, або relative. Якщо позиція не знайдена, буде встановлено absolute.

Демонстрації:

• Drag.Cart - http://demos.mootools.net/Drag.Cart
• Drag.Absolutely - http://demos.mootools.net/Drag.Absolutely
• DragDrop - http://demos.mootools.net/DragDrop

Див. також:

• Drag

Drag.Move Method: stop

Перевіряє, чи знаходиться Element над зоною скидання, і викликає подію drop. Інакше викликає подію 'emptydrop', прив'язану до цього Element. Нарешті, викликає метод stop класу Drag Class.

Синтаксис:

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();
        }
    }

});

Див. також:

• Drag:stop

Native: Element

Користувацький Native, щоб дозволити використання всіх його методів з будь-яким елементом DOM через функцію $ $.

Element Method: makeDraggable

Додає поведінку перетягування для переміщення до Element з використанням переданих опцій.

Синтаксис:

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

Аргументи:

1. options - (object, опціонально) Див. Drag та Drag.Move для прийнятних опцій.

Повертає:

• (object) Створений екземпляр Drag.Move.

Приклад:

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

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

Див. також:

• Drag, Drag.Move