JQuery Draggable：嵌套在“handle”元素中的“cancel”元素答案

【问题标题】：JQuery Draggable: "cancel" element nested within "handle" elementJQuery Draggable：嵌套在“handle”元素中的“cancel”元素
【发布时间】：2013-01-16 15:09:31
【问题描述】：

我想让div 可拖动，使用嵌套在其中的元素作为句柄。为此，我可以使用 JQuery UI 的 Draggable 和 handle 选项。

但是，当嵌套在 handle 元素中的元素被拖动时，我想防止拖动。添加cancel 选项似乎不起作用。

使用 Draggable 可以实现这种行为吗？

这是一个小提琴：http://jsfiddle.net/M6qdh/

HTML：

<div class="dialog">
  <div class="titleBar">
    <span class="title">Title</span>
    <div class="close">X</div>
  </div>
</div>

JS：

$(function() {
  $(".dialog").draggable({
    handle: $(".titleBar"),
    cancel: $(".close")
  });
});

【问题讨论】：

标签： jquery html jquery-ui draggable jquery-ui-draggable

【解决方案1】：

实现您想要的一种方法是防止 mousedown 事件从关闭按钮冒泡 DOM 树：

$(".dialog").draggable({
    handle: $(".titleBar")
});

$(".close").mousedown(function(e) {
    e.stopPropagation();
});

你会发现一个更新的小提琴here。

【讨论】：