HTML5 UL LI Draggable

Question

我有一个无序列表：

• 列表项1
• 列表项2
• 清单项目3
• 清单项目4
• 清单项目5

使用此代码实现：

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

现在，我希望它是可拖动的。例如，如果我向上拖动"列表项5"，我可以将其放置在"列表项2"one_answers"列表项3"之间，它将成为第三个。

我想在没有jQuery的情况下完成这项工作，只需要简单的Javascript。此外，我想使用原生HTML5 draggable="true"。如有任何帮助，我们将不胜感激。

Answer 1

属性"draggable"仅启用元素进行拖动。您需要实现DnD侦听器并实现drop事件来进行所需的更改。

在本例中，您会发现您想要解决的问题相同：http://www.html5rocks.com/en/tutorials/dnd/basics/

在本例中，它们实现了A、B和C列的拖放。用户可以通过DnD更改顺序。

Answer 2

此代码将解决您的问题。带有MDN的Redone示例试试这个jsfiddle.net

HTML 5

<ul>
  <li class="dropzone" id='0' draggable="true">List item 1</li>
  <li class="dropzone" id='1' draggable="true">List item 2</li>
  <li class="dropzone" id='2' draggable="true">List item 3</li>
  <li class="dropzone" id='3' draggable="true">List item 4</li>
  <li class="dropzone" id='4' draggable="true">List item 5</li>
</ul>

纯JS

let dragged;
let id;
let index;
let indexDrop;
let list;
  document.addEventListener("dragstart", ({target}) => {
      dragged = target;
      id = target.id;
      list = target.parentNode.children;
      for(let i = 0; i < list.length; i += 1) {
        if(list[i] === dragged){
          index = i;
        }
      }
  });
  document.addEventListener("dragover", (event) => {
      event.preventDefault();
  });
  document.addEventListener("drop", ({target}) => {
   if(target.className == "dropzone" && target.id !== id) {
       dragged.remove( dragged );
      for(let i = 0; i < list.length; i += 1) {
        if(list[i] === target){
          indexDrop = i;
        }
      }
      console.log(index, indexDrop);
      if(index > indexDrop) {
        target.before( dragged );
      } else {
       target.after( dragged );
      }
    }
  });

Answer 3

只需将draggable="true"添加到li元素中即可。

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

如果您使用Firefox进行测试，请注意，它还需要在拖动操作中发送一些数据：

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

否则，您将看不到被拖动内容的重影图像。。。

Answer 5

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

试试这个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);
    });