Dodawanie funkcji i klas do elementów drag & drop

Demo:

Drop here

1

2

3

Mój przykład opiera się o gotowe rozwiązania biblioteki jQuery UI. Standardowo na stronie dostawcy skryptów mamy po jednym najprostszym przykładzie wykorzystania funkcji draggable, droppable. Powyższy przykład prezentuje elementy chwytania, przeciągania i upuszczania w dowolne miejsce na stronie. Dodatkowo, jeśli opuścimy nasz element w odpowiednie pole to możemy przypisać do niego pewne ciekawe zachowania.

Układ elementów

Standardowo już na początek potrzebujemy stworzyć szablon HTML z naszymi elementami. Prezentuje go w najprostszym układzie:

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<div id="draggable1" class="ui-widget-content">
	<p>1</p>
	<div class="content" style="display:none">
		<h1>One</h1>
		<p>Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum</p>
	</div>
</div>
 
<div id="draggable2" class="ui-widget-content">
	<p>2</p>
	<div class="content" style="display:none">
		<h1>Two</h1>
		<p>Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum</p>
	</div>
</div>

<div id="draggable3" class="ui-widget-content">
	<p>3</p>
	<div class="content" style="display:none">
		<h1>Three</h1>
		<p>Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum</p>
	</div>
</div>
<div style="position:absolute;left:0px;bottom:10px;width:100%;height:100px;" class="window"></div>

Układ ten składa się z trzech elementów. Pierwszy to obszar, do którego będziemy przerzucać nasze elementy (id=”droppable”). Kolejnym są trzy div’y, które można przeciągać i upuszczać na stronie(id=”draggable1/2/3″). Ostatnim elementem jest obszar, który będzie wyświetlał zawartość elementów dynamicznych (draggable).

Biblioteki jQuery UI

Całość skryptu oparta jest na tych właśnie bibliotekach i do działania konieczne jest ich zaimportowanie do naszego skryptu. Nasze funkcje, które wykorzystujemy znajdują się tutaj: droppable i draggable

Funkcja jQuery

Biblioteki swoją droga a skrypt odpowiedzialny za działanie to całkiem inna sprawa. Wrzucam w całości i kolejno będę omawiał istotne elementy.

$(function() {
	var pastDraggable = "";
    $("#draggable1" ).draggable({
        start: function(){
			Positioning.initialize($(this));
        }
    });
	$("#draggable2" ).draggable({
        start: function(){
			Positioning.initialize($(this));
        },
    });
	$("#draggable3" ).draggable({
		start: function(){
			Positioning.initialize($(this));
        },
    });
    $("#droppable" ).droppable({
		drop: function(event, ui) {
			$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
			var currentDraggable = 	$(ui.draggable).attr('id');
			$(ui.draggable).addClass('kok');
			$(ui.draggable).find('.content').clone().show().appendTo('.window');

			if (pastDraggable != "") {
				$("#" + pastDraggable).animate($("#" + pastDraggable).data().originalLocation,"slow");
				
			}	
			pastDraggable = currentDraggable;
		},
		out: function(event, ui) {
			var currentDraggable = 	$(ui.draggable).attr('id');
			$(ui.draggable).animate($(ui.draggable).data().originalLocation,"slow");
		}
    });
});
var Positioning = (function () {
    return {
		initialize: function (object) {
		$('.ui-widget-content').removeClass('kok');
		$('.window').empty();
			object.data("originalLocation",$(this).originalPosition= {top:0,left:0});
		},

	};
})();

Aby lepiej zrozumieć nasza funkcję warto wcześniej zajrzeć do dokumentacji funkcji draggable i droppable na stronie jQuery UI
Pierwszym ważnym elementem w naszej funkcji jest dodanie zdarzenia do elementów dynamicznych (draggable). Zdarzenie start: zawiera funkcję pozycji. Daje nam to możliwość przemieszczania elementów i upuszczania go w dowolne miejsce.

    $("#draggable1" ).draggable({
        start: function(){
			Positioning.initialize($(this));
        }

Następnie przechodzimy do naszego pola do upuszczenia elementu. Funkcja droppable posiada dwa zdarzenia. Pierwszy drop: Pobiera id elementu aktywnego, dodaje klasę, oraz zawartość elementu wyświetla do obszaru o klasie window.

$(ui.draggable).find('.content').clone().show().appendTo('.window');

Jeśli nasz element zostanie upuszczony do naszej skrzynki dropp i ponownie z niej wyciągnięty poza obszar to powraca do swojej pierwotnej pozycji. Można to oczywiście zmienić, ale funkcja ta zapobiega wprowadzeniem chaosu do naszych elementów. Natomiast elementy przeciągane i upuszczane w dowolne pole poza obszarem dropp nie wracają na swoje miejsce.

out: function(event, ui) {
			var currentDraggable = 	$(ui.draggable).attr('id');
			$(ui.draggable).animate($(ui.draggable).data().originalLocation,"slow");
		}

Efekt końcowy

Widać przykład być może nie powala na kolana, ale jest to idealny szablon wyjściowy do tworzenia rozbudowanych skryptów. Można go wykorzystać na wiele sposobów, sam korzystam z nie go w wielu skryptach. Naprawdę powiada ogromny potencjał a ogranicza nas tylko nasza wyobraźnia.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code