Drag & Drop met jQuery UI

Laten we, voordat we met enkele praktische voorbeelden gaan, eens kijken naar de methoden voor slepen en neerzetten die jQuery UI voor ons heeft.
1- Versleepbare methode ()
De versleepbare methode beheert de elementen van een HTML-pagina die u wilt verplaatsen, deze methode kan op twee verschillende manieren worden gebruikt:

 • $ (selector, context) .draggable (opties) • $ (selector, context) .draggable ("actie", parameters) 

Laten we een voorbeeld bekijken:
Eerst moeten we de benodigde bestanden opnemen, een veelgemaakte fout die wordt gemaakt is om de jQuery UI .js voor de jQuery .js op te nemen, onthoud dat jQuery de kern is en de jQuery UI alleen bibliotheken, plug-ins, widgets zijn, die zonder jQuery niet zullen zou werken.

We roepen de methode aan:

 $ (functie () {$ ("#draggable") .draggable ();}); 

En we associëren het met de selector die de div ermee zal zijn.

Sleep me rond

Hier is de volledige broncode:

 jQuery UI Draggable - Standaardfunctionaliteit
Sleep me rond

2- dropbare () methode
De droppable-methode beheert de elementen van een HTML-pagina die u in een gebied wilt neerzetten. Net als de versleepbare methode kan deze op twee verschillende manieren worden gebruikt:

 • $ (selector, context) .droppable (opties) • $ (selector, context) .droppable ("actie", parameters) 

Laten we een voorbeeld hiervan bekijken:
We nemen de bestanden op, we voegen de stijlen toe, we roepen de methoden op (hier zullen we de versleepbare methode gelijkelijk gebruiken) gevolgd door de droppable methode. Hier de broncode:

 jQuery UI Droppable - Standaardfunctionaliteit
Sleep me naar mijn doel
Hier neerzetten

En dit zou onze uitvoer in de browser zijn:

Wat als we beide concepten samenvoegen in een ingewikkelder voorbeeld, zoiets als een winkelwagentje? Laten we kijken:
Eerst nemen we onze bestanden op:

We voegen enkele stijlen toe aan onze winkelwagen:

We zullen ook de accordeon () -methode uit de jQuery UI-bibliotheek gebruiken om onze winkelwagen aantrekkelijker te maken, we roepen onze methoden op en associëren ze met de selectors, in dit geval zullen we alle functionaliteit van de versleepbare methode uitbreiden naar een lijst:

En zo ziet ons winkelwagentje eruit:

Om het te kunnen testen, is hier de volledige broncode:

 jQuery UI Droppable - Winkelwagen Demo
T-shirts

Lolcat-shirt
Cheezeburger-shirt
Buckit-shirt


Tassen

Zebra gestreept
Zwart leer
Alligatorleer


Gadgets

iPhone
iPod
iPad


Voeg hier uw artikelen toe

Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven