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

Question

我想创建一个div可拖动，使用嵌套在其中的元素作为句柄。为此，我可以使用带有handle选项的JQuery UI Draggable。

但是，我想在拖动嵌套在 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")
  });
});

Answer 1

实现所需目标的一种方法是阻止mousedown事件从关闭按钮冒泡DOM树：

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

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

您会找到更新的小提琴here。