Question

我如何创建类似于jquery＆＃34;＃draggable handle＆＃34;在Javascript？

（遗憾的是，Jquery不适合我。）

我有一个名为＆＃34; dxy＆＃34;在其中我有另一个名为＆＃34; draggable_handle＆＃34;的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

我不知道如果我理解你正在尝试做什么，只要添加＆＃34; mousedown＆＃34; 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);

我把你小提琴并做出改变：http://jsfiddle.net/BlessYAHU/f687ppg8/

这是有效的，因为在你的函数（mouseDown，divMove）中，你得到容器dom元素（dxy）。

只做div的一部分可拖动

3 个答案: