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>

在上面的代码中，我可以单击并拖动handle元素或文本“Item＃”来重新排序。

我认为在ondragstart函数中，我可以检查event.target的类是否处理，如果没有event.preventDefault()，但看起来目标始终是li是否拖动开始来自div或li。

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

Answer 1

你必须以相反的方式解决这个问题。在 div 上设置ondragstart，然后当用户点击div时，为 li 设置draggable为 true 。当drop set 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来选择draggable属性设置为true的所有li元素。 helpful article at MDN dragdrop

Answer 2

我基于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

HTML5从子元素拖放父元素

2 个答案: