Comment utiliser JavaScript pour implémenter le tri des images par glisser-déposer ?-js tutoriel-php.cn

Comment utiliser JavaScript pour implémenter le tri des images par glisser-déposer ?

WBOY

Libérer： 2023-10-18 10:24:31

original

1250 Les gens l'ont consulté

如何使用 JavaScript 实现图片拖拽排序功能？

Comment utiliser JavaScript pour implémenter la fonction de tri par glisser-déposer d'images ?

Dans le développement Web moderne, il est courant d'implémenter la fonction de tri par glisser-déposer des images. En faisant glisser et en déposant des images, vous pouvez facilement modifier la position des images sur la page, réalisant ainsi le tri des images. Cet article explique comment utiliser JavaScript pour obtenir cette fonctionnalité, ainsi que des exemples de code spécifiques.

Tout d'abord, nous devons préparer du code HTML et CSS pour afficher les images et définir les styles. Supposons que vous disposiez d'un conteneur <div> qui contient plusieurs éléments <img>, chacun représentant une image. L'exemple de code est le suivant : <div> 容器，其中包含多个 <img> 元素，每个元素都代表一张图片。示例代码如下：

<div id="container">
  <img src="image1.jpg" draggable="true">
  <img src="image2.jpg" draggable="true">
  <img src="image3.jpg" draggable="true">
  <!-- 其他图片... -->
</div>

Copier après la connexion

接下来，我们需要为图片元素添加拖拽事件的监听器，以便能够通过拖拽改变图片的位置。JavaScript 提供了 dragstart、dragover 和 drop 等拖拽相关的事件，我们可以利用这些事件来实现拖拽排序功能。下面的代码示例展示了如何为图片元素添加拖拽事件的监听器：

document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  var imgs = container.getElementsByTagName('img');
  
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs[i];
    
    img.addEventListener('dragstart', dragstartHandler);
    img.addEventListener('dragover', dragoverHandler);
    img.addEventListener('drop', dropHandler);
  }
});

function dragstartHandler(event) {
  var img = event.target;
  
  // 设置被拖拽的数据（图片的索引值）
  event.dataTransfer.setData('text/plain', img.dataset.index);
}

function dragoverHandler(event) {
  event.preventDefault(); // 阻止默认行为（如禁止拖拽进入）
  event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为“移动”
}

function dropHandler(event) {
  event.preventDefault(); // 阻止默认行为（如禁止拖拽进入）
  
  var container = document.getElementById('container');
  var imgs = container.getElementsByTagName('img');
  
  var srcIndex = event.dataTransfer.getData('text/plain'); // 拖拽图片的索引值
  var dstIndex = event.target.dataset.index; // 目标位置的索引值
  
  if (srcIndex !== dstIndex) {
    var srcImg = imgs[srcIndex];
    var dstImg = imgs[dstIndex];
    
    // 交换两个图片的位置
    container.insertBefore(srcImg, dstImg);
  }
}

Copier après la connexion

以上代码中，dragstartHandler、dragoverHandler 和 dropHandler 分别处理 dragstart、dragover 和 drop 事件。在 dragstartHandler 中，我们通过 event.dataTransfer.setData() 方法设置被拖拽图片的索引值。在 dragoverHandler 中，我们通过 event.preventDefault() 方法阻止默认的拖拽行为，并通过 event.dataTransfer.dropEffect 设置拖拽效果为“移动”。在 dropHandler 中，我们通过 event.preventDefault() 方法阻止默认的拖拽行为，并利用拖拽事件中的数据获取到被拖拽图片和目标位置图片的索引值，然后通过 container.insertBefore()rrreee

Ensuite, nous devons ajouter un écouteur d'événement glisser à l'élément image afin que la position de l'image puisse être modifiée en la faisant glisser. JavaScript fournit des événements liés au glisser tels que dragstart, dragover et drop. Nous pouvons utiliser ces événements pour implémenter la fonction de tri par glisser-déposer. . L'exemple de code suivant montre comment ajouter un écouteur d'événement glisser à un élément d'image :

rrreee

Dans le code ci-dessus, dragstartHandler, dragoverHandler et dropHandler Gérez respectivement les événements dragstart, dragover et drop. Dans dragstartHandler, nous définissons la valeur d'index de l'image déplacée via la méthode event.dataTransfer.setData(). Dans dragoverHandler, nous empêchons le comportement de glisser par défaut via la méthode event.preventDefault() et définissons le glisser via event.dataTransfer.dropEffect L'effet est "bouger". Dans dropHandler, nous empêchons le comportement de glisser-déposer par défaut via la méthode event.preventDefault() et utilisons les données de l'événement glisser pour obtenir l'image déplacée et l'emplacement cible. La valeur d'index de l'image, puis échangez les positions des deux images via la méthode container.insertBefore().

Avec le code ci-dessus, nous avons implémenté avec succès la fonction de tri par glisser-déposer des images. Lorsque l'utilisateur fait glisser une image, les autres images ajusteront automatiquement leur position pour obtenir un effet de tri. 🎜🎜Pour résumer, grâce à JavaScript, nous pouvons utiliser des événements de glisser pour implémenter la fonction de tri par glisser-déposer des images. En définissant la fonction de traitement des événements, nous pouvons gérer la logique correspondante dans les trois étapes du début du glissement, du processus de glissement et de la fin du glissement. Grâce aux exemples de code ci-dessus, j'espère que les lecteurs pourront comprendre comment utiliser JavaScript pour implémenter la fonction de tri par glisser-déposer des images, et pourront apporter les modifications et extensions correspondantes en fonction des besoins réels. 🎜

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!