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

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('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', 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('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

Vollständiger Code

  
  



  <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

  
  
  



  

  
  


<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!