HTML5 UL LI Dragable

J'ai une liste non ordonnée:

  • Élément de la liste 1
  • Élément de la liste 2
  • Élément de la liste 3
  • Élément de liste 4
  • Élément de liste 5

Mis en œuvre avec ce code:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

Maintenant, je veux qu'il soit déplaçable. Par exemple, si je fais glisser un "élément de Liste 5" vers le haut, je peux la placer entre "élément de la Liste 2" et "élément de la Liste 3", et il va devenir la troisième.

Je veux le faire sans jQuery, du pur Javascript. Aussi, je voudrais utiliser HTML5 native draggable="true". Toute aide serait appréciée.

source d'informationauteur Anand Chowdhary

  1. 13

    Attribut "draggable" permet uniquement de l'élément de glissement. Vous avez besoin de mettre en œuvre le Mdn auditeur et de mettre en œuvre la baisse de l'événement pour faire les changements que vous souhaitez.

    Vous trouverez le même problème que vous voulez résoudre dans cet exemple: http://www.html5rocks.com/en/tutorials/dnd/basics/

    Dans l'exemple ils mettent en œuvre le glisser-déposer pour les colonnes A, B et C. l'Utilisateur peut modifier l'ordre par le Mdn.

  2. 3

    Juste ajouter draggable="true" pour votre li-éléments.

    <ol ondragstart="">
<li draggable="true" data-value="data1">List Item 1</li>
<li draggable="true" data-value="data2">List Item 2</li>
<li draggable="true" data-value="data3">List Item 3</li>
</ol>
  3. 3

    Si vous testez avec Firefox, notez que cela nécessite également que certaines données soient envoyées dans l'opération de glisser:

    function handleDragStart(e) {
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', e.target.innerHTML);
}

myLi.addEventListener('dragstart', handleDragStart, false);

    Sinon, vous ne les verrez pas l'image fantôme du contenu glissé...

  4. 1
    <ul id="parent">

    <li class="parent">List item 1</li>

    <li class="parent">List item 2</li>

    <li class="parent">List item 3</li>

    <li class="parent">List item 4</li>

    <li class="parent">List item 5</li>
</ul>

    essayer ce js

        var dragSrcEl = null;
function handleDragStart(e) {
//Target (this) element is the source node.
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); //Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';  //See the section on the DataTransfer object.
return false;
}
function handleDragEnter(e) {
//this /e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');  //this /e.target is previous target element.
}
function handleDrop(e) {
//this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); //Stops some browsers from redirecting.
}
//Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this) {
//Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function handleDragEnd(e) {
//this/e.target is the source node.
[].forEach.call(cols, function (col) {
col.classList.remove('over');
});
}
var cols = document.querySelectorAll('#parent .parent');
[].forEach.call(cols, function (col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false)
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});