拖放 HTML5 元素和 javascript 问题

Posted 2023-05-08

【中文标题】拖放 HTML5 元素和 javascript 问题

【英文标题】：Drag and drop HTML5 element and javascript issue

【发布时间】：2018-06-08 06:11:31

【问题描述】：

我有一个清单：

<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/

【问题讨论】：

jsfiddle.net/vrg7oj2w/1

【参考方案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>

【讨论】：

Gracias Fernando, funciona tal com lo necesitaba。 :-)

【参考方案2】：

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

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