Class: Drag

Дозволяє змінювати дві CSS властивості Element на основі позиції миші, поки кнопка миші натиснута.

Реалізує:

Events, Chain

Drag Method: constructor

Синтаксис:

var myDragInstance = new Drag(el[, options]);

Аргументи:

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

Опції:

• grid - (integer: за замовчуванням false) Відстань у пікселях для перетягування з прив'язкою до сітки.
• handle - (element: за замовчуванням переданий елемент) Елемент Element, який діє як маркер для перетягуваного елемента.
• invert - (boolean: за замовчуванням false) Чи інвертувати значення, що повідомляються при старті та перетягуванні.
• limit - (object: за замовчуванням false) Об'єкт з властивостями x та y, що використовується для обмеження руху Element.
• modifiers - (object: за замовчуванням {'x': 'left', 'y': 'top'}) Об'єкт з властивостями x та y, що вказує модифікатори CSS (напр. 'left').
• snap - (integer: за замовчуванням 6) Відстань перетягування before, після якої Element починає реагувати на перетягування.
• style - (boolean: за замовчуванням true) Чи встановлювати модифікатор як властивість стилю елемента.
• unit - (string: за замовчуванням 'px') Рядок, що вказує одиницю вимірювання CSS, яка додається до всіх цілих значень.

Події:

• beforeStart - Виконується before екземпляр Drag прив'язує події. Отримує перетягуваний елемент як аргумент.
• start - Виконується, коли користувач починає перетягування (при mousedown). Отримує перетягуваний елемент як аргумент.
• snap - Виконується, коли користувач перетягнув далі за опцію snap. Отримує перетягуваний елемент як аргумент.
• drag - Виконується на кожному every кроці перетягування. Отримує перетягуваний елемент як аргумент.
• complete - Виконується, коли користувач завершує перетягування. Отримує перетягуваний елемент як аргумент.

Приклади:

var myDrag = new Drag('myDraggable', {
    snap: 0,
    onSnap: function(el){

        el.addClass('dragging');
    },
    onComplete: function(el){
        el.removeClass('dragging');
    }

});
 
//create an Adobe reader style drag to scroll container
var myDragScroller = new Drag('myContainer', {

    style: false,
    invert: true,
    modifiers: {x: 'scrollLeft', y: 'scrollTop'}
});

Примітки:

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

Див. також:

• W3Schools: CSS Units

Drag Method: attach

Прив'язує слухача миші до маркера, роблячи Element перетягуваним.

Синтаксис:

myDrag.attach();

Повертає:

• (object) Цей екземпляр Drag.

Приклади:

var myDrag = new Drag('myElement').detach(); //The Element can't be dragged.

$('myActivator').addEvent('click', function(){
    alert('Ok, now you can drag.');
    myDrag.attach();

});

Див. також:

• $, Element:makeDraggable, Drag:detach, Element:addEvent

Drag Method: detach

Відв'язує слухача миші від маркера, запобігаючи перетягуванню Element.

Синтаксис:

myDrag.detach();

Повертає:

• (object) Цей екземпляр Drag.

Приклади:

var myDrag = new Drag('myElement');
$('myDeactivator').addEvent('click', function(){

    alert('No more dragging for you, Mister.');
    myDrag.detach();
});

Див. також:

• $, Element:makeDraggable, Element:addEvent

Drag Method: stop

Зупиняє (видаляє) всі прив'язані події від екземпляра Drag та виконує подію 'complete' Event.

Синтаксис:

myDrag.stop();

Приклади:

var myDrag = new Drag('myElement', {

    onSnap: function(){
        this.moved = this.moved || 0;
        this.moved++;
        if(this.moved > 100) {

            this.stop();
            alert("Stop! You'll make the Element angry.");
        }
    }

});

Native: Element

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

Element Method: makeResizable

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

Синтаксис:

var myResize = myElement.makeResizable([options]);

Аргументи:

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

Повертає:

• (object) Екземпляр Drag, який був створений.

Приклади:

var myResize = $('myElement').makeResizable({
    onComplete: function(){

        alert('Done resizing.');
    }
});

Див. також:

• Drag