Question

我已经为我的一个项目实现了HTML5拖放功能和JS。我目前面临的问题如下：

在使用我的LI元素的拖放排序时，我需要更新data-iterator。换句话说，当我想将测试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功能，以便在每次订单更改后更新data-iterator属性

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

基于HTML5和JS拖放更新li属性

1 个答案: