Maison > Article > interface Web > Tutoriel avancé HTML5 - API glisser-déposer pour implémenter le tri par glisser-déposer
Avant-propos
HTML5 fournit une API par glisser-déposer direct, qui est super Il est pratique pour nous de réaliser l'effet glisser-déposer. Nous n'avons pas besoin d'écrire beaucoup de js. Nous pouvons réaliser diverses fonctions glisser-déposer en écoutant simplement l'événement glisser-déposer du. élément.
Si vous souhaitez glisser et déposer un élément, vous devez définir l'attribut draggable de l'élément sur true. Lorsque l'attribut est faux, le glisser-déposer ne sera pas autorisé. L'élément img et l'élément a ont tous deux l'attribut draggable défini sur true par défaut, ils peuvent donc être glissés et déposés directement. Si vous ne souhaitez pas glisser-déposer ces deux éléments, définissez simplement l'attribut sur false. Événements glisser-déposerLes événements glisser-déposer sont générés par différents éléments. Lorsqu'un élément est glissé et déposé, il peut traverser de nombreux éléments avant d'atteindre finalement l'élément que vous souhaitez placer. Ici, j'appelle temporairement l'élément glissé l'objet source, l'élément passé l'objet de processus et l'élément arrivé l'objet cible. Différents objets génèrent différents événements de glisser-déposer. Objet source :<p id="source" draggable="true">a元素</p> <p id="process">b元素</p> <p id="target">c元素</p> <script> var source = document.getElementById('source'), // a元素 process = document.getElementById('process'), // b元素 target = document.getElementById('target'); // c元素 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生 console.log('a元素开始被拖动'); },false) process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生 console.log('a元素开始进入b元素'); },false) process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生 console.log('a元素离开b元素'); },false) target.addEventListener('drop',function(ev){ // drop事件由c元素产生 console.log('a元素拖放到c元素了'); ev.preventDefault(); },false) document.ondragover = function(e){e.preventDefault();} </script>objet dataTransfer fournit un objet de transfert de données dataTransfer dans tous les événements de glisser-déposer, qui est utilisé pour transférer des données entre l'objet source et l'objet cible. Voyons ensuite les méthodes et les propriétés de cet objet pour comprendre comment il transfère les données. setData()Cette méthode stocke les données dans l'objet dataTransfer. Reçoit deux paramètres. Le premier est une chaîne indiquant le type de données à stocker. Actuellement, les types suivants sont pris en charge :
xml : texte XML.
event.dataTransfer.setData('text/plain','Hello World');getData()Cette méthode lit les données de l'objet dataTransfer. Le paramètre est le type de données spécifié dans setData. Par exemple :
event.dataTransfer.getData('text/plain');
event.dataTransfer.clearData();setDragImage()Cette méthode définit l'icône glisser-déposer en utilisant l'élément img. Reçoit trois paramètres, le premier est l'élément icône, le second est le déplacement de l'élément icône sur l'axe X à partir du pointeur de la souris et le troisième est le déplacement sur l'axe Y de l'élément icône à partir du pointeur de la souris. Par exemple :
var source = document.getElementById('source'), icon = document.createElement('img'); icon.src = 'img.png'; source.addEventListener('dragstart',function(ev){ ev.dataTransfer.setDragImage(icon,-10,-10) },false)attributs effectAllowed et dropEffect Ces deux attributs sont combinés pour définir l'effet visuel du glisser-déposer. Il convient de noter : IE ne prend pas en charge les objets dataTransfer. Oui, il n'est pas pris en charge quelle que soit la version d'IE. Implémentation du tri par glisser-déposerNous connaissons déjà l'utilisation de l'API par glisser-déposer. Implémentons un simple tri par glisser-déposer, qui est également courant dans. projets. Voyons d'abord l'idée :
var source = document.querySelectorAll('.list'), dragElement = null; for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart',function(ev){ dragElement = this; },false); source[i].addEventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement,this); } }, false) source[i].addEventListener('dragleave', function(ev){ if(dragElement != this){ if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){ this.parentNode.appendChild(dragElement); } } }, false) }; document.ondragover = function(e){e.preventDefault();} document.ondrop = function(e){e.preventDefault();}Adresse complète du code : drag-demoCompatiblePrincipalement compatible avec IE Non super, mais au moins c'est compatible avec le tri par glisser ci-dessus dans IE10. Et dans mon expérience simple, j'ai découvert que lorsque l'élément n'est pas défini sur
hauteur dans IE, l'événement dragleave ne sera pas déclenché.
Le point le plus important est qu'ils sont totalement incompatibles sur iOS et Android. Heureusement, il existe un plug-in qui le rend parfaitement compatible avec les appareils mobiles.Adresse du plug-in : ios-html5-drag-drop-shim
<script> var iosDragDropShim = { enableEnterLeave: true } </script> <script src="vendor/ios-drag-drop.js"></script>【Recommandations associées】1
Tutoriel vidéo en ligne h5 gratuit
2. Manuel de la version complète HTML5
3 Tutoriel vidéo HTML5 original php.cn
.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!