Z pomocą jQuery, jak wiadomo, kodowanie skomplikowanych mechanizmów staje się o wiele prostsze. W dzisiejszym artykule przestawiam kilka naprawdę interesujących pluginów realizujących „Drag and Drop”. Dzięki temu możesz udostępnić użytkownikowi całkiem nowe i atrakcyjne opcje personalizacji strony, czy aplikacji online.

1. Collapsible, Drag n Drop

Plugin funkcjonalnie robi wszystko to co możemy zobaczyć w panelu iGoogle – poza standardowym „drag i drop” mamy jeszcze możliwość minimalizowania samych paneli.

Zobacz Demo

2. Drag To Share

Bardzo ciekawa propozycja wykorzystania przeciągania elementów – aby włączyć panel podzielenia się treścią w socialmedia należy przeciągnąć obrazek w wyznaczony obszar.

Zobacz Demo

3. Drag’n Drop With jQuery And PHP

Propozycja jak wykorzystując ideę drag and drop można zwiększyć usability strony i pozwolić zmieniać jej zawartość, zapamiętując przy tym dane (w tym przypadku kolejność na liście)

Zobacz Demo

4. jQuery UI multiple draggable plugin

Wtyczka jest niejako rozszerzeniem pluginu jQuery UI Draggable. Rozszerzenie polega na tym, że elementy można łączyć w grupy i przeciągać całe grupy.

Zobacz Demo

5. jQuery Portlets

Klasyka drag and drop

Zobacz Demo

6. Lista drag and drop

Bardzo prosty przykład w jaki sposób można stworzyć sortowalną listę z wykorzystaniem JavaScriptu.

Zobacz Demo

7. jqDnR

jqDnR jest bardzo lekkim pluginem do jQuery pozwalającym przeciągać i przestawiać elementy, jak również zmieniać ich wielkość.

Zobacz Demo

8. Dragndrop

Przyjemna baza pod budowanie aplikacji webowych i interfejsów wykorzystujących technikę drag and drop. Plugin posiada wiele zaimplementowanych rozwiązań, jak obsługę callbacków czy parametryczne tworzenie elementów do przeciągania.

Zobacz Demo

9. Dragscrollable

Interesująca propozycja wykonania w jQuery scrolla na przeciągnięcie elementu, jednakże bez wykorzystania UI, przez co rozwiązanie jest szybsze od rozwiązania wykorzystującego UI.

Zobacz Demo

10. Nettuts drag and drop

I na koniec rozwiązanie identyczne z tym co proponuje iGoogle, z tym, że dużo bardziej kolorowe. Autor krok po kroku przechodzi przez kolejne kroki implementacji aż do efektu pokazanego poniżej.

Zobacz Demo

Pluginy te mogą stanowić już gotowe rozwiązania, ale również są idealną bazą wyjścia do implementacji własnych bardziej rozbudowanych i skomplikowanych rozwiązań.

Zapisz się na RSS by dowiadywać się o nowościach w serwisie!