Code

Hoe HTML5's Drag and Drop te gebruiken

Er hebben lang JavaScript-functies bestaan ​​waarmee we slepen-en-neerzetinterfaces kunnen maken, maar geen van deze implementaties was oorspronkelijk voor de browser.

In HTML5 hebben we een native methode voor het maken van drag-and-drop-interfaces (met een beetje hulp van JavaScript).

Ik ga je vertellen hoe je dit kunt bereiken ...

Browserondersteuning

Ik wil dit graag uit de weg halen voordat we verder gaan: HTML5 slepen en neerzetten wordt momenteel ondersteund door alle grote desktopbrowsers (inclusief IE (zelfs IE 5.5 heeft gedeeltelijke ondersteuning)), maar het wordt momenteel niet ondersteund door populaire mobiele apparaten browsers.

Versleep gebeurtenissen

In elke fase van het slepen en neerzetten wordt een andere gebeurtenis geactiveerd, zodat de browser weet welke JavaScript-code moet worden uitgevoerd; de evenementen zijn:

  • dragStart: start wanneer de gebruiker het element begint te slepen.
  • sleepEnter: start wanneer het versleepbare element voor het eerst over het doelelement wordt gesleept.
  • dragOver: wordt geactiveerd wanneer de muis over een element wordt bewogen wanneer het slepen plaatsvindt.
  • dragLeave: ontslagen als de cursor van de gebruiker een element verlaat tijdens het slepen.
  • slepen: vuurt telkens wanneer we de muis bewegen tijdens het slepen van ons element.
  • drop: afgevuurd wanneer de daadwerkelijke drop wordt uitgevoerd.
  • dragEnd: start wanneer de gebruiker de muis loslaat tijdens het slepen van het object.

Met al deze gebeurtenislisteners heeft u veel controle over hoe uw interface werkt en hoe deze precies presteert in verschillende omstandigheden.

Het dataTransfer-object

Dit is waar alle magie met slepen en neerzetten gebeurt; dit object bevat de gegevens die zijn verzonden door de sleepbewerking. De gegevens kunnen op verschillende manieren worden ingesteld en opgehaald, de belangrijkste zijn:

  • dataTransfer.effectAllowed = waarde: dit geeft de soorten toegestane acties terug, mogelijke waarden zijn none, copy, copyLink, copyMove, link, linkMove, move, all en uninitialized.
  • dataTransfer.setData (formaat, gegevens): voegt de opgegeven gegevens en de bijbehorende indeling toe.
  • dataTransfer.clearData (format): wist alle gegevens voor een specifieke indeling.
  • dataTransfer.setDragImage (element, x, y): stelt de afbeelding in die u wilt slepen, de x- en y-waarden geven aan waar de muisaanwijzer zich zou moeten bevinden (0, 0 plaatst deze linksboven).
  • data = dataTransfer.getData (format): Zoals de naam zegt, worden de gegevens geretourneerd voor een specifieke indeling.

Een drag-and-drop-voorbeeld maken

Nu gaan we beginnen met het maken van onze eenvoudig slepen en neerzetten voorbeeld, je kunt zien dat we twee kleine div's en een grotere hebben, we kunnen de kleine binnen de grote slepen en neerzetten en we kunnen ze zelfs terugzetten.

Het object slepen

Het eerste dat we moeten doen, is onze HTML maken. We maken de divs versleepbaar met het versleepbare attribuut, zoals zo: 

draggable="true">

Wanneer dit is gebeurd, moeten we de javascript-functie definiëren die wordt uitgevoerd wanneer we dit element gaan slepen: 

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

In deze code verklaren we eerst welk type effect we toestaan ​​in de bewerking en stellen we dat in om te verplaatsen, in de tweede regel stellen we de gegevens in voor de bewerking en in dit geval is het type Tekst en de waarde is de ID van het element we slepen. Hierna gebruiken we de methode setDragImage om in te stellen wat we gaan slepen en waar de cursor zich bevindt tijdens het slepen, en aangezien de kubussen 200 bij 200 px zijn, heb ik dat in het midden geplaatst. Eindelijk keren we terug waar.

Het object laten vallen

Om een ​​element een drop te laten accepteren, moet het luisteren naar 3 verschillende evenementen: dragEnter, dragOver en ook de drop- gebeurtenis, dus laten we dit toevoegen aan onze html in de div met de ID van groot:

Nu we gebeurtenislisteners hebben toegevoegd, moeten we deze functies maken. We beginnen met de dragenter en dragover-evenementen: 

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

In de eerste functie definiëren we wat we willen bereiken wanneer het element dat we slepen het element bereikt waarin het zou moeten vallen. In dit geval voorkomen we alleen het standaardgedrag van de browser, maar je kunt een aantal dingen doen, zoals de achtergrond of voeg wat tekst toe om aan te geven dat de gebruiker naar het juiste gebied sleept en met de dragleave-gebeurtenis kunt u de door u aangebrachte wijzigingen ongedaan maken. Vervolgens in de dragOver- functie voorkomen we eenvoudig dat de standaard de drop- down toestaat.

Het volgende deel is waar we de functie definiëren voor wanneer we het element daadwerkelijk op het gewenste doel laten vallen: 

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

In dit laatste deel stellen we eerst een variabele in met de naam data waarin we alle gegevens krijgen die beschikbaar zijn voor het tekstformaat en vervolgens voegen we die gegevens (die het element zijn dat we slepen) toe aan de div waar we willen laten vallen het element. Eindelijk enkele laatste details, zoals het stoppen van propagatie en ook het retourneren van false.

De sectie een doelwit maken

controleren de demo , je kunt zien dat we er ook voor zorgden dat de twee divs naar hun oorspronkelijke locatie konden worden gesleept. Gelukkig is het toevoegen van een ander bestemmingsdoel eenvoudiger dan je denkt; omdat de functies al aanwezig zijn, hoeven we alleen de gebeurtenislisteners toe te voegen, zoals:

En dat is alles wat we nodig hebben om de divs naar de originele plek te slepen.

Conclusie

Er zijn veel versleeptoepassingen gebouwd met JavaScript-bibliotheken en het is vaak eenvoudiger om die bibliotheken te gebruiken. Maar ik hoop dat u in deze HTML5 & JavaScript-techniek het toekomstige potentieel van de native oplossing ziet.

Heeft u een interface voor slepen en neerzetten gebouwd? Hoe verhoudt native HTML5 zich tot pure JavaScript-oplossingen? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, beeld laten vallen via fotophilde.

ux ontwerp