拖放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拖拽李成員「東經下降。

我的問題是，在新位置釋放從未發生。我甚至想用這個例子，但它並沒有爲我工作：

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