更新基於HTML5和JS的li屬性拖放

Question

我已經在JS的項目中實現了HTML5的拖放功能。我目前面臨的問題如下：

我需要更新數據迭代器時，使用我的LI元素的拖放排序。換句話說，當我想將Test 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

您可以修改您的_onDragEnd功能，使其每一個訂單的變化

// 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); 
 
    }