我有一个列表：拖放HTML5元素和JavaScript的问题
<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拖拽李成员“东经下降。
我的问题是，在新位置释放从未发生。我甚至想用这个例子，但它并没有为我工作：
https://html.spec.whatwg.org/multipage/dnd.html#event-drag
这里，我离开你我的完整的工作（和错误的）代码的jsfiddle。请你帮助我。
https://jsfiddle.net/junihh/vrg7oj2w/
2 回答
添加dragover和drop事件列表。
参考： https://developer.mozilla.org/en-US/docs/Web/Events/drop
你可以试试这个
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>
