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

在这里，我给了我一个完整的（错误的）代码。 请你帮我一下。

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