HTML5 UL LI可拖动

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"和"列表项目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重做示例 试试这个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>