仅使 div 的一部分可拖动答案

【问题标题】：Make only part of a div draggable仅使 div 的一部分可拖动
【发布时间】：2016-05-03 22:35:04
【问题描述】：

如何在 Javascript 中创建类似于 jquery 的“可拖动句柄”的东西？

（不幸的是，Jquery 不适合我。）

我在其中有一个名为“dxy”的 div 我还有另一个名为“draggable_handle”的 div。目前，我可以将 dxy 拖动到我按下的任何位置。我该怎么做才能让我可以拖动 dxy，但只有当我按下 draggable_handle 并且在 div 中没有其他位置时？

<div id="dxy">
  <div id="draggable_handle">
    <p>
    Draggable part
    </p>
  </div>
</div>

我做了一个 JsFiddle，这将使我的意思更清楚，在这里：http://jsfiddle.net/Lk2hLthp/7/

由于我是新手，请添加一些代码示例或 jsfiddle。 =)

【问题讨论】：

这能回答你的问题吗？ Drag drop with handle

标签： javascript html draggable handle

【解决方案1】：

像这样将事件监听器添加到内部元素而不是外部元素：

function addListeners() {
  document.getElementById('draggable_handle').addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
}

【讨论】：

啊，就是这么简单。无论如何，如果不问，我可能不会想出来。感谢您的快速回复！ =)
不客气！不要忘记将问题标记为已回答。

【解决方案2】：

我不知道我是否理解您要执行的操作，但是将“mousedown”侦听器添加到 draggable_handle 对我有用：

document.getElementById('draggable_handle').addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
}

【讨论】：

【解决方案3】：

在您的示例中，只需更改您在 addListeners 函数中获取的 id 即可满足您的需求： document.getElementById('draggable_handle').addEventListener('mousedown', mouseDown, false);

而不是： document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);

我分叉了你的小提琴并做出了改变：http://jsfiddle.net/BlessYAHU/f687ppg8/

这是因为在您的函数（mouseDown、divMove）中，您获得了容器 dom 元素（dxy）。

【讨论】：