HTML5 UL LI Ziehbare

Question

Ich habe eine ungeordnete Liste:

• Liste Artikel 1
• Liste Artikel 2
• Liste Artikel 3
• Liste Artikel 4
• Liste Artikel 5

Implementiert mit diesem 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> 

Jetzt möchte ich, dass es ziehbar ist. Wenn ich zum Beispiel "Element 5 auflisten" nach oben ziehe, kann ich es zwischen "Listenelement 2" und "Listenelement 3" platzieren, und es wird Dritter.

Ich möchte dies ohne jQuery tun, nur Javascript. Außerdem möchte ich natives HTML5 ziehbares = "wahr" verwenden. Jede Hilfe wäre willkommen.

Answer 1

Fügen Sie einfach DragGable = "True" zu Ihren Li-Elementen hinzu.

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

Answer 2

Attribut "ziehbar" aktiviert nur das Element zum Ziehen. Sie müssen den DnD-Listener implementieren und das Drop-Ereignis implementieren, um die gewünschten Änderungen vorzunehmen.

Sie das gleiche Problem, das Sie in diesem Beispiel lösen wollen finden: http://www.html5rocks.com/en/tutorials/dnd/basics/

Im Beispiel sie implementieren Drag & Drop für Spalten A, B und C. Der Benutzer kann die Reihenfolge von DnD ändern.

Answer 3

Wenn Sie mit Firefox testen, beachten Sie, dass es auch einige Daten erfordert in der Drag-Operation gesendet werden:

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

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

Andernfalls würden Sie das Geisterbild des Inhalts nicht sehen gezogen wird ...

Answer 4

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

versuchen diese 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); 
    });