拖放HTML5元素和JavaScript的问题

Z时代
2024-01-10
分类：问答

我有一个列表：拖放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/

回答：

你可以试试这个

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>