拖放 HTML5 元素和 javascript 问题

Question

我有一个列表：

<ol class="list" id="drag-list">
    <li data-itemid="01" draggable="true">
        <span class="dragger"></span>
        <span>01 - Lorem ipsum dolor sit amet.</span>
    </li>
    <li data-itemid="02" draggable="true">
        <span class="dragger"></span>
        <span>02 - Lorem ipsum dolor.</span>
    </li>
    <li data-itemid="03" draggable="true">
        <span class="dragger"></span>
        <span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
    </li>
    <li data-itemid="04" draggable="true">
        <span class="dragger"></span>
        <span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
    </li>
    <li data-itemid="05" draggable="true">
        <span class="dragger"></span>
        <span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
    </li>
</ol>

现在我需要使用 HTML5 拖放来重新排序 LI 的成员。

我的问题是在新职位上发布从来没有发生过。我什至尝试使用这个示例，但它对我不起作用：

https://html.spec.whatwg.org/multipage/dnd.html#event-drag

在这里，我给你留下了一个 jsfiddle，其中包含我完整的工作（和错误）代码。请你帮帮我。

https://jsfiddle.net/junihh/vrg7oj2w/

Answer 1

你可以试试这个

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);

  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
}

function handleDragLeave(e) {
  this.classList.remove('over');
}

function handleDrop(e) {

  if (e.stopPropagation) {
    e.stopPropagation(); 
  }


  if (dragSrcEl != this) {
    this.parentNode.removeChild(dragSrcEl);
    var dropHTML = e.dataTransfer.getData('text/html');
    this.insertAdjacentHTML('beforebegin',dropHTML);
    var dropElem = this.previousSibling;
    addDnDHandlers(dropElem);
    
  }
  this.classList.remove('over');
  return false;
}

function handleDragEnd(e) {
  this.classList.remove('over');


}

function addDnDHandlers(elem) {
  elem.addEventListener('dragstart', handleDragStart, false);
  elem.addEventListener('dragenter', handleDragEnter, false)
  elem.addEventListener('dragover', handleDragOver, false);
  elem.addEventListener('dragleave', handleDragLeave, false);
  elem.addEventListener('drop', handleDrop, false);
  elem.addEventListener('dragend', handleDragEnd, false);

}

var cols = document.querySelectorAll('#drag-list li');
[].forEach.call(cols, addDnDHandlers);

* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    list-style: none;
    outline: 0;
}

html {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    font: normal 18px/100% Helvetica,Arial,sans-serif;
    color: #666;
}

.transitions, a, .page {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

a {
    color: #000;
    text-decoration: underline;
}
a:hover { text-decoration: none; }

.page {
    max-width: 750px;
    min-width: 230px;
    margin: 25px auto;
    padding: 0 25px;
}

.list li {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    border: 1px solid #DDD;
    cursor: move; //effect drag and drop
}
.list span {
    display: block;
}
.list span:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25px;
    background-color: #EEE;
}
.list span:nth-child(2) {
    padding: 10px 10px 10px 40px;
    line-height: 120%;
}

<ol class="list" id="drag-list">
    <li  draggable="true">
        <span class="dragger"></span>
        <span>01 - Lorem ipsum dolor sit amet.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>02 - Lorem ipsum dolor.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
    </li>
    <li draggable="true">
        <span class="dragger"></span>
        <span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
    </li>
</ol>

Answer 2

将 dragover 和 drop 事件添加到列表中。

参考： https://developer.mozilla.org/en-US/docs/Web/Events/drop

拖放 HTML5 元素和 javascript 问题

Drag and drop HTML5 element and javascript issue

html

javascript

drag-and-drop

draggable

drag