Javascript 如何使父div可拖动

我有一个包含三个按钮的div。div需要是可拖动的，这样您就可以在屏幕上拖动所有三个按钮。这很好，但问题是，当我点击其中一个按钮时，它继承了可拖动的id，并且可以自己拖动。我不希望这种情况发生。所以我的问题是：我如何使我的按钮可以拖动，但使它们始终保持在一起，并使它们可以点击。我在下面添加了代码，但这里有一个JSFiddle：

所以要清楚：div还需要通过拖动一个单独的按钮来拖动，但随后div的其余部分需要使用它。现在拖动单个按钮只会移动按钮

另外，我不想使用JQuery用户界面

HTML:

<div id="draggable" class="ui-widget-content">
  <button ng-click="menu.shown = !menu.shown">MENU</button>
  <br>
  <button ng-click="disconnect()">CLOSE</button>
  <br>
  <button ng-click="">KEYS</button>
</div>

CSS:

更新1

这是一个有效的解决方案： 但是，当我单击div并开始拖动时，div的中心会跳到我的光标上。它工作得很好，但看起来有点不稳定。有没有办法防止div移动到我的光标上

---

非常欢迎您的帮助。

您可以阅读事件的

target

属性并

返回false

，以避免所有不可拖动的

被拖动

if(e.target.id !== "draggable") {
    return false;
}

编辑的小提琴：

它工作得很好，但有一个建议：不要以ID为目标，因为使用此代码不能拖动多个元素（ID必须是唯一的），因此解决方法是编写属性或类名并使用它

---

祝您好运。

您可以读取事件的

target

属性，并

返回false

，以避免所有不可拖动的

被拖动

if(e.target.id !== "draggable") {
    return false;
}

编辑的小提琴：

它工作得很好，但有一个建议：不要以ID为目标，因为使用此代码不能拖动多个元素（ID必须是唯一的），因此解决方法是编写属性或类名并使用它

---

祝你好运。

假设你反对JQueryUI的文件大小，我仍然推荐一个预构建的解决方案，因为为什么要重新发明轮子

是一个非常漂亮的库，我在资源大小成问题时使用过它。它是20k的小型化（显然更小的Gzip）并且可以在CDN上使用-CDN本身有很多好处，例如缓存

$(function() {
    $( "#draggable" ).draggabilly();
});

有一些CSS挂钩、不同的选项、事件等

---

假设您反对JQueryUI的文件大小，我仍然建议您使用预构建的解决方案，因为为什么要重新发明轮子

是一个非常漂亮的库，我在资源大小成问题时使用过它。它是20k的小型化（显然更小的Gzip）并且可以在CDN上使用-CDN本身有很多好处，例如缓存

$(function() {
    $( "#draggable" ).draggabilly();
});

有一些CSS挂钩、不同的选项、事件等

使用

$draggable=$（“#draggable”）而不是
$dragging=$（'e.target'）

如果您尝试使用光标在按钮上拖动，它将拖动div。它将拖动
#可拖动
，而不是目标

使用
$draggable=$（“#draggable”）而不是
$dragging=$（'e.target'）

如果您尝试使用光标在按钮上拖动，它将拖动div。它将拖动
#可拖动
，而不是目标

这到底是为什么用
Java
标记的？我们不会犯错误，我们只会制造快乐的意外。解决方法可能与这个问题的方法相同：@HerbertVan Vliet你分享了一个关于插件的话题，但这个问题不是插件，而是一个定制的可拖动方法。@Marcos pérez Gude:我的错！我终于注意到了……这到底是为什么用
Java
标记的？我们不会犯错误，我们只会制造快乐的意外。解决方法可能与这个问题的方法相同：@HerbertVan Vliet你分享了一个关于插件的话题，但这个问题不是插件，而是一个定制的可拖动方法。@Marcos Pérez Gude:我的错！我终于注意到…也许我把操作搞错了，但我想，用光标在按钮上方拖动也应该是可能的。这样，你就不能拖动按钮了，只有家长（按操作要求）是的，我还希望当用户单击其中一个按钮时，它是可拖动的。我编辑了这个问题。哦！这个问题我理解错了。为了实现你所说的，试着用@ketan的解决方案，这很好，也许我把操作搞错了，但我想，用光标在按钮上方开始拖动也应该是可能的。这样，你就不能拖动按钮了，只有家长（如操作所问）是的，我还希望当用户单击其中一个按钮时，它可以被拖动。我编辑了这个问题。哦！这个问题我理解错了。要实现你说的，试着用@ketan的解决方案，有些人需要自己去实现。有时候你也可以试试。有趣的是：）如问题中所述：我不想使用JQueryUI@MarcosP雷兹古德是真的。实现您自己的学习内容是很好的，但在生产环境中，您最好使用经过彻底测试的内容。无论从长期还是短期来看，它都会为你节省时间。由于我们不知道OP的情况，为了让这个问题在将来对其他人有用，提到图书馆仍然是一个好主意。我同意这一点。但在开发生产中，这取决于需求。有时，插件的滥用使得制作网页的速度非常慢，而且有缺陷。有时候最好是自己制作符合自己需求的插件。有些人需要自己完成一些事情。有时候你也可以试试。有趣的是：）如问题中所述：我不想使用JQueryUI@MarcosP雷兹古德是真的。实现您自己的学习内容是很好的，但在生产环境中，您最好使用经过彻底测试的内容。无论从长期还是短期来看，它都会为你节省时间。作为