Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Techniken zur einfachen Implementierung der Drag-Funktion in JavaScript HTML5

Ausführliche Erläuterung der Techniken zur einfachen Implementierung der Drag-Funktion in JavaScript HTML5

黄舟
黄舟Original
2017-03-24 15:08:541120Durchsuche

In diesem Artikel wird hauptsächlich Javascript HTML5 zur einfachen Implementierung der Drag-Funktion vorgestellt, die einen bestimmten Referenzwert hat

Ziehen und Drop (Drag and Drop) sind Standardkomponenten von HTML5, nämlich wie man ein Drag-Objekt wird, wie man ein Drag-Ziel wird und die -Ereignisse für das gezogene Objekt . die Ereignisse, die dem Drag-Ziel gehören, und wie Informationen zwischen Drag-and-Drop-Objekten übertragen werden.

Ereignisse, die dem gezogenen Objekt gehören

  • Dragstart (wird ausgelöst, wenn das Objekt gerade gezogen wird)

  • Drag (wird ausgelöst, nachdem das Dragstart-Ereignis ausgelöst wurde)

  • dragend (wird ausgelöst, wenn das Drag-Ereignis endet)

Ereignisse im Besitz des Drag-Ziels

  • Drager (wird ausgelöst, wenn das gezogene Element in das Drop-Ziel eintritt)

  • Dragover (wird ausgelöst, wenn das gezogene Element im Drop-Ziel verschoben wird, ähnlich wie bei Mouseover)

  • drop (wird ausgelöst, wenn das gezogene Element im Drop-Ziel platziert wird)

So wird man zu einem ziehbaren Objekt

In HTML kann das img-Element standardmäßig gezogen werden, und andere Elemente müssen auf ziehbar eingestellt werden =true. Sie können es ziehen.

<p draggable="true"></p>

So werden Sie ein Drag-Ziel

In HTML können Elemente standardmäßig nicht zu Drop-Zielen werden, wir deaktivieren lediglich das Standardverhalten von drapenter und Drapover-Ereignisse können als Drag-and-Drop-Ziele bezeichnet werden.

droptarget.addEventListener(&#39;dragenter&#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;dragover&#39;, function(event) {
  event.preventDefault();
});

So übertragen Sie Informationen zwischen Drag-and-Drop-Objekten

Im Ereignis gibt es ein dataTransferObjekt, das über zwei gängige Methoden verfügt setData() und getData() werden zum Speichern von Drag-and-Drop-Informationen bzw. zum Abrufen von Drag-and-Drop-Informationen verwendet. Unter diesen kann setData () nur zu Beginn des Drag-Ereignisses festgelegt werden, dh wenn das Dragstart-Ereignis festgelegt wird, und getData () wird im Allgemeinen abgerufen, wenn das Drop-Ereignis ausgelöst wird.

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

Vollständiger Code





  
  HTML5 拖拽



  <p draggable="true"></p>
  

<script> var droptarget = document.getElementById(&#39;droptarget&#39;); var dragobj = document.getElementById(&#39;dragobj&#39;); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener(&#39;dragstart&#39;, function(event) { event.dataTransfer.setData(&#39;id&#39;, dragobj.id); }); droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;drop&#39;, function(event) { var id = event.dataTransfer.getData(&#39;id&#39;); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>

Es liegt ein Problem vor

Firefox-Browser Das Ziehen eines Bildes öffnet standardmäßig ein neues Fenster. Gemäß der erweiterten JavaScript-Programmierung ist das Standardereignis im Drop-Ereignis deaktiviert, was das Problem nicht löst.

Lösung: Wenn Sie das Bild als Hintergrundbild von p und p als Drag-Objekt verwenden, tritt dieses Problem nicht auf.

Endgültiger Code





  
  HTML5 拖拽
  



  

<script> var droptarget = document.getElementById(&#39;droptarget&#39;); var dragobj = document.getElementById(&#39;dragobj&#39;); // drapobj 拖拽元素 // droptarget 放置目标 dragobj.addEventListener(&#39;dragstart&#39;, function(event) { event.dataTransfer.setData(&#39;id&#39;, dragobj.id); }); droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) { event.preventDefault(); }); droptarget.addEventListener(&#39;drop&#39;, function(event) { var id = event.dataTransfer.getData(&#39;id&#39;); var obj = document.getElementById(id); event.preventDefault(); this.appendChild(obj); }); </script>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Techniken zur einfachen Implementierung der Drag-Funktion in JavaScript HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn