javascript - 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 的类是否是句柄，如果不是则执行 event.preventDefault() 但它似乎是目标无论拖动从 div 还是 li 开始，始终是 li。

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

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