HTML5 UL LI Draggable

Question

Mam nieuporządkowaną listę:

• przedmiot 1
• przedmiot 2
• przedmiot 3
• przedmiot 4
• przedmiot 5

Wbudowany z tym kodem:

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

Teraz chcę, żeby można było je przeciągnąć. Na przykład, jeśli przeciągnę "Element listy 5" w górę, mogę umieścić go pomiędzy "Element listy 2" i "Element listy 3", a stanie się on trzeci.

Chcę to zrobić bez jQuery, po prostu JavaScript. Ponadto chciałbym użyć natywnego HTML5 draggable = "true". Każda pomoc będzie doceniona.

Answer 1

Po prostu dodaj draggable = "true" do twoich elementów.

<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

Atrybut "przeciągalny" włącza tylko element do przeciągania. Musisz zaimplementować detektor DnD i zaimplementować zdarzenie upuszczania, aby wprowadzić żądane zmiany.

Znajdziesz tu ten sam problem, który chcesz rozwiązać w tym przykładzie: http://www.html5rocks.com/en/tutorials/dnd/basics/

W przykładzie one realizować przeciągnij-upuść dla kolumn A, B i C. użytkownik może zmienić kolejność przez TNP.

Answer 3

Jeśli testujesz z Firefoksem, trzeba pamiętać, że wymaga ona także niektóre dane są przesyłane w operacji przeciągania:

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

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

W przeciwnym razie nie byłoby zobaczyć obraz duch zawartości przeciągane ...

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> 

spróbować 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); 
    });