HTML5とJSのドラッグ・アンド・ドロップに基づくli属性の更新

Question

私のプロジェクトでJSと一緒にHTML5のドラッグ・アンド・ドロップ機能を実装しました。私が現在直面している問題は次のとおりです。

私のLI要素のドラッグアンドドロップソートを使用する場合、データイテレータを更新する必要があります。言い換えれば、テスト3を最初の位置に移動する場合、データイテレータは3から0に変更する必要があります。私はあなたがそのアイデアを得たと思う。

HTML

<ul id="_slides_slideshow_repeat"> 
    <li class="postbox" data-iterator="0" draggable="true">Test</li> 
    <li class="postbox" data-iterator="1" draggable="true">Test 1</li> 
    <li class="postbox" data-iterator="2" draggable="true">Test 2</li> 
    <li class="postbox" data-iterator="3" draggable="true">Test 3</li> 
</ul> 

JS

function sortable(rootEl, onUpdate) { 
    var dragEl; 

    // Making all siblings movable 
    [].slice.call(rootEl.children).forEach(function (itemEl) { 
     itemEl.draggable = true; 
    }); 

    // Function responsible for sorting 
    function _onDragOver(evt) { 
     evt.preventDefault(); 
     evt.dataTransfer.dropEffect = 'move'; 

     var target = evt.target; 
     if (target && target !== dragEl && target.nodeName == 'LI') { 
      // Sorting 
      rootEl.insertBefore(dragEl, target.nextSibling || target); 
     } 
    } 

    // End of sorting 
    function _onDragEnd(evt){ 
     evt.preventDefault(); 

     dragEl.classList.remove('ghost'); 
     rootEl.removeEventListener('dragover', _onDragOver, false); 
     rootEl.removeEventListener('dragend', _onDragEnd, false); 


     // Notification about the end of sorting 
     onUpdate(dragEl); 
    } 

    // Sorting starts 
    rootEl.addEventListener('dragstart', function (evt){ 
     dragEl = evt.target; // Remembering an element that will be moved 

     // Limiting the movement type 
     evt.dataTransfer.effectAllowed = 'move'; 
     evt.dataTransfer.setData('Text', dragEl.textContent); 


     // Subscribing to the events at dnd 
     rootEl.addEventListener('dragover', _onDragOver, false); 
     rootEl.addEventListener('dragend', _onDragEnd, false); 


     setTimeout(function() { 
      // If this action is performed without setTimeout, then 
      // the moved object will be of this class. 
      dragEl.classList.add('ghost'); 
     }, 0) 
    }, false); 
} 

// Using      
sortable(document.getElementById('_slides_slideshow_repeat'), function (item) { 
    console.log(item); 
}); 

私は修正すべきJSラインコードはよく分からないので、任意のヘルプは高く評価されるだろう。

Answer 1

それは

// End of sorting 
 
    function _onDragEnd(evt){ 
 
     var iterator = 0; 
 
     var items = rootEl.getElementsByTagName('li'); 
 
     
 
     evt.preventDefault(); 
 

 
     dragEl.classList.remove('ghost'); 
 
     rootEl.removeEventListener('dragover', _onDragOver, false); 
 
     rootEl.removeEventListener('dragend', _onDragEnd, false); 
 

 
     // Notification about the end of sorting 
 
     
 
     for (var i = 0; i < items.length; i++) { 
 
      items[i].setAttribute('data-iterator', i) 
 
     } 
 
     
 
     onUpdate(dragEl); 
 
    }