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 =“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 2

属性“draggable”只能使元素进行拖动。您需要实现DnD监听器并实施放置事件以进行所需的更改。

你会找到你想要在这个例子来解决同样的问题：http://www.html5rocks.com/en/tutorials/dnd/basics/

在这个例子中，他们实现拖放的列A，B和C的用户可以通过免打扰更改顺序。

Answer 3

如果您正在使用Firefox的测试，请注意，这还需要一些数据在拖动操作发送：

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

myLi.addEventListener('dragstart', handleDragStart, false); 

否则，你不会看到被拖动的内容的重影...

Answer 4

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