HTML5拖放：从子元素中拖动父元素

Question

我有一个元素列表，每个元素中都有一个控制句柄。我可以轻松地拖放元素以重新排序。但是我不确定如何将拖动开始限制在句柄元素上。

例如：

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

在上述代码中，我可以点击和拖动句柄元素或文本“Item #”来重新排序它们。

我认为在ondragstart函数中，我可以检查event.target的类是否为handle，如果不是则执行event.preventDefault()，但似乎无论拖动是从div还是li开始，目标始终是li。

因此，在ondragstart事件中有没有一种方法可以检查鼠标是否悬停在子元素上。

- Jonathan.

---

我遇到了同样的问题，你能解决这个问题吗？ - Noitidart

Answer 1

根据Mouser的评论，我进行了基于此的操作。以下是示例：

var object = document.querySelector('li');

var dragger = document.querySelector('li .reorder');

dragger.addEventListener('mousedown', function () {
  object.setAttribute('draggable','true');
});

dragger.addEventListener('mouseout', function () {
  object.removeAttribute('draggable');
});

http://codepen.io/anon/pen/qOWJYF

- Alonso Soto

Answer 2

你需要用另一种方式解决这个问题。 在 div 上设置 ondragstart，然后当用户点击 div 时，将 li 的 draggable 设置为 true。当放置后，将 draggable 设置回 false。这样只有在用户使用 reorder 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选择所有具有可拖动属性设置为true的li元素。MDN上的有用文章拖放

- Mouser