仅使 div 的一部分可拖动

Question

如何在 Javascript 中创建类似于 jquery 的 "draggable handles" 的内容？

（不幸的是，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，因为我是新手。 =)

Answer 1

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

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

Answer 2

我不知道我是否理解你想要做什么，但是将 "mousedown" 侦听器添加到 draggable_handle 对我有用：

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

Answer 3

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

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

我分叉了你 fiddle 并进行了更改：http://jsfiddle.net/BlessYAHU/f687ppg8/

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

仅使 div 的一部分可拖动

Make only part of a div draggable

javascript

html

draggable

handle