Explication détaillée des techniques permettant d'implémenter facilement la fonction glisser en JavaScript HTML5

Cet article présente principalement en détail javascript html5 pour implémenter facilement la fonction glisser, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Faites glisser et. drop (glisser-déposer) sont des composants standard de HTML5. Ci-dessous, nous le décrivons sous cinq aspects, à savoir comment devenir un objet de glisser, comment devenir une cible de glisser et les événements sur l'objet glissé , les événements appartenant à la cible du glisser et comment transférer des informations entre les objets glisser-déposer.

Événements appartenant à l'objet déplacé

• dragstart (déclenché lorsque l'objet est simplement déplacé)

• drag (déclenché après le déclenchement de l'événement dragstart)

• dragend (déclenché à la fin de l'événement drag)
  

Événements appartenant à la cible de déplacement

• dragenter (déclenché lorsque l'élément glissé entre dans la cible de dépôt)

• dragover (déclenché lorsque l'élément glissé est déplacé dans la cible de dépôt, similaire au survol de la souris)

• drop (déclenché lorsque l'élément glissé est placé dans la cible de dépôt)
  

Comment devenir un objet déplaçable

En HTML, l'élément img peut être déplacé par défaut et les autres éléments doivent être définis comme déplaçables =true. Vous pouvez le faire glisser.

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

Comment devenir une cible de déplacement

En HTML, les éléments ne peuvent pas devenir des cibles de dépôt par défaut, seulement nous désactivons le comportement par défaut de drapenter et événements drapover , cela peut être appelé une cible de glisser-déposer.

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

Comment transférer des informations entre des objets glisser-déposer

Il existe un dataTransferobjet dans l'événement, qui a deux méthodes courantes setData() et getData() sont utilisés respectivement pour stocker des informations de glisser-déposer et obtenir des informations de glisser-déposer. Parmi eux, setData() ne peut être défini qu'au début de l'événement glisser, c'est-à-dire lorsque l'événement dragstart est défini, et getData() est généralement obtenu lorsque l'événement drop est déclenché.

// 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);
});

Code complet

  
  




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

Il y a un problème

Navigateur Firefox Faire glisser une image ouvre une nouvelle fenêtre par défaut. Selon la programmation avancée JavaScript, l'événement par défaut est désactivé dans l'événement drop, ce qui ne résout pas le problème.

Solution : Si vous utilisez l'image comme image d'arrière-plan de p et p comme objet de déplacement, ce problème n'existera pas.

Code final

  
  
  




  

  
  


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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!