HTML5 从子元素拖放父元素答案

【问题标题】：HTML5 Drag and drop parent from child elementHTML5 从子元素拖放父元素
【发布时间】：2014-08-24 20:47:59
【问题描述】：

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

例如：

<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() 但似乎目标始终是 li 是否从 div 开始拖动或li.

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

【问题讨论】：

我也遇到了同样的问题，请问您在哪里可以解决这个问题？

标签： javascript html

【解决方案1】：

我基于 Mouser 的 cmets。看这个例子：

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

【讨论】：

【解决方案2】：

你必须反过来解决这个问题。在div上设置ondragstart，然后当用户点击div时，将li的draggable设置为true。放下时将可拖动设置回 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 元素。 helpful article at MDN dragdrop

【讨论】：