HTML5从子元素拖放父元素

Question

我有一个元素列表,每个元素都有一个句柄控制元素.我可以轻松地拖放元素以重新排序.但是我不确定将拖动开始限制为handle元素.

例如:

<ul>
    <li draggable="true" ondragstart="..." ondrop="..." ondragover="..."><div class="reorder"></div>Item 1</li>
    <li draggable="true" ondragstart="..." ondrop="..." ondragover="..."><div class="reorder"></div>Item 2</li>
    <li draggable="true" ondragstart="..." ondrop="..." ondragover="..."><div class="reorder"></div>Item 3</li>
</ul>

在上面的代码中,我可以单击并拖动handle元素或文本"Item#"来重新排序它们.

我认为在ondragstart函数中,我可以检查是否处理的类,event.target如果没有,event.preventDefault()但似乎目标总是li是否是从div或开始拖动li.

那么有没有办法检查鼠标是否在ondragstart事件上的子元素上

Answer 1

你必须以相反的方式解决这个问题。在div上设置 ondragstart ，然后当用户单击 div 时，将li的draggable 设置为true。放下时将 Draggable 设置回false。这样，您仅在用户使用重新排序div时才进行拖动。您只需将对象注册到全局范围即可

 function dragStart(event) {
   globalDraggedElement = this.parentElement;
   this.parentElement.draggable = true;
 }

function dragOver(event) {

  if (globalDraggedElement != this) {
    //If the element is not the dragged element, show mouse drop cursor.
    //Else show forbidden to drop cursor, by default.
     event.preventDefault();
  }

}

function dragDrop(event) {
  if (globalDraggedElement != this) {
    //perform action!

  }
  globalDraggedElement.draggable = false;
  //Delete the element from the global scope.
  delete globalDraggedElement;
}

function dragEnd(event) {
        this.draggable = false;

}

var liElement = document.querySelectorAll("li[draggable='true']");
for (var i = 0; i < liElement.length; ++i) {
  liElement[i].children[0].addEventListener('dragstart', dragStart, false);
  liElement[i].addEventListener('dragenter', dragOver, false);
  liElement[i].addEventListener('dragover', dragOver, false);
  liElement[i].addEventListener('drop', dragDrop, false);
  liElement[i].addEventListener('dragend', dragEnd, false);
}

请使用 addEventListeners 添加事件。我使用 document.querySelectorAll 选择所有 li 元素，并将 Draggable 属性设置为 true。MDN 拖放中的有用文章