Jak zrobić jQuery Drag&Drop plugin w 5 minut

Dodany dnia poniedziałek, 28 Luty 2011 przez Alchemy Code

3 komentarze BOOKMARK

Plan jest prosty – zrobić plugin do jQuery, który umożliwi wykonanie drag & drop na dowolnym elemencie, by jednocześnie nie musieć korzystać z dostępnych rozbudowanych wtyczek.

A wszystko w dosłownie 5 minut

Działanie

Działanie pluginu ma polegać na możliwości przeniesienia dowolnego elementu, pod który będzie podpięty plugin. Przenoszenie będzie aktywowane poprzez kliknięcie na element, następnie zostanie on wyśrodkowany względem kursora. Poruszanie kursorem będzie powodowało przemieszczanie się elementu po ekranie. Aby zatrzymać przenoszenie elementu należy znów kliknąć na element – który powinien zostać opuszczony w miejscu w którym kursora.

Zobacz DEMO

Szablon pluginu

Jak w każdym pluginie należy zacząć od podstaw, czyli od szablonu. W naszym przypadku będzie on naprawdę prosty. Plugin będzie się nazywał dragdrop i taką właśnie funkcje będzie należało wywołać na elemencie na którym ma zostać wywołana funkcja. Do zmiennej globalnej element zostanie zapisany element wywołania funkcji:

(function($){
$.fn.dragdrop = function(){
var element = this;
})(jQuery);

Samo wywołanie będzie wyglądało następująco:

$(document).ready(function(){
$("#box").dragdrop();
});

Eventy i funkcje

Mając już gotowy szkielet pluginu, należy rozłożyć schemat działania na czynniki pierwsze. Flaga started będzie sygnalizować, czy należy poruszać elementem. Funkcje bindMove() i unbindMove() będą realizowały poruszanie i opuszczanie elementu, natomiast highlight() będzie odpowiedzialna za oznaczenie aktualnie przenoszonego elementu.

Dodatkowo do elementu został podpięty event nasłuchujący jego kliknięcie i w zależności od tego, czy flaga started jest true czy false, wywoływana jest funkcja przenosząca lub opuszczająca element.

$(element).bind("click", function(e) {
if(!started){
bindMove();
started=true;
}else{
unbindMove();
started=false;
}
});

Na tym etapie całość wygląda następująco:

(function($){
$.fn.dragdrop = function(){
var element = this;
var started = false;
$(element).bind("click", function(e) {
if(!started){
bindMove();
started=true;
}else{
unbindMove();
started=false;
}
});
function bindMove(){
};
function unbindMove(){
};
function highlight(display){
}
};
})(jQuery);

Przenoszenie elementu

Przenoszenie elementu jest właściwie ciągłym zmienianiem stylów CSS, wywoływanym na zdarzenie mousemove, na elemencie którego dotyczy wywołanie funkcji. W pierwszej kolejności wywoływana jest funkcja e.preventDefault();, która zapobiega wywołaniu się domyślnych zdarzeń, np. scrollowaniu podczas przenoszenia elementu.

Następnie z eventu pobierane są współrzędne x i y położenia kursora i na tej podstawie wyliczana jest współrzędna x i y która ma zostać dodana do stylów CSS elementu w postaci wartości left i top. Dodatkowo ustawiany jest atrybut position na absolute, w przypadku gdyby nie był wcześniej nadany. Wyśrodkowanie elementu względem kursora jest realizowane za pomocą wzoru: WSPÓŁRZĘDNA_X – (DŁUGOŚĆ/2). Analogicznie jest z wysokością.

function bindMove(){
$(document).bind("mousemove", function(e) {
e.preventDefault();
var x,y;
var orig = e.originalEvent;
x = orig.clientX;
y = orig.clientY;
$(element).css({top: y-$(element).height()/2, left: x-$(element).width()/|>2, position: 'absolute'});
});
highlight(true);
};

Dodatkowo wywoływana jest funkcja highlight(true), która oznacza wybrany element dodając żółtą ramkę informującą, że może być on poruszany. Wywołanie funkcji z wartością false powoduje usunięcie owej ramki.

function highlight(display){
if(display){
$(element).css({border : '1px solid yellow'});
}else{
$(element).css({border : 'none'});
}
}

Opuszczanie elementu

Opuszczanie elementu sprowadza się do przestania nasłuchiwania na event mousemove oraz usunięcia ramki:

function unbindMove(){
$(document).unbind("mousemove");
highlight(false);
};

A co z urządzeniami dotykowymi?

Pozostaje jeszcze jedynie zapytać co z urządzeniami dotykowymi? Otóż niestety powyższy plugin nie zadziała na ipadzie, smartfonie czy jakimkolwiek urządzeniu dotykowym.

Aby jednak dostosować plugin do urządzeń dotykowych, wystarczy nieco przerobić eventy i ich obsługę. Do statu pluginu do eventu click należy dodać kolejny touchstart, następnie do mousemove, dodać touchmove, zarówno w funkcji bindMove() jak również w unbindMove(). Dodatkowo zmienia nam się sposób czytania pozycji kursora (w tym wypadku miejsca dotyku), co musimy uwzględnić w funkcji bindMove():

function bindMove(){
$(document).bind("touchmove mousemove", function(e) {
e.preventDefault();
var x,y;
var orig = e.originalEvent;
if(orig.changedTouches==undefined){
x = orig.clientX;
y = orig.clientY;
}else{
x = orig.changedTouches[0].pageX;
y = orig.changedTouches[0].pageY;
}
$(element).css({top: y-$(element).height()/2, left: x-$(element).width()/|>2, position: 'absolute'});
});
highlight(true);
};

Pozycja jest pobierana z orig.changedTouches, więc jeżeli wartość ta jest undefined, znaczy, że powinniśmy pobierać współrzędne w dotychczasowy sposób. W przeciwnym razie pobieramy współrzędne właśnie z tego obiektu.

Gotowy plugin

Tym sposobem mamy w pełni funkcjonujący plugin realizujący drag&drop:

(function($){
$.fn.dragdrop = function(){
var element = this;
var started = false;
$(element).bind("touchstart click", function(e) {
if(!started){
bindMove();
started=true;
}else{
unbindMove();
started=false;
}
});
function bindMove(){
$(document).bind("touchmove mousemove", function(e) {
e.preventDefault();
var x,y;
var orig = e.originalEvent;
if(orig.changedTouches==undefined){
x = orig.clientX;
y = orig.clientY;
}else{
x = orig.changedTouches[0].pageX;
y = orig.changedTouches[0].pageY;
}
$(element).css({top: y-$(element).height()/2, left: x-$(element).width()/|>2, position: 'absolute'});
});
highlight(true);
};
function unbindMove(){
$(document).unbind("touchmove mousemove");
highlight(false);
};
function highlight(display){
if(display){
$(element).css({border : '1px solid yellow'});
}else{
$(element).css({border : 'none'});
}
};
};
})(jQuery);