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

Question

我想制作一个div可拖动的，使用嵌套在其中的元素作为句柄。为此，我可以使用带有选项的 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();
});

你会在这里找到一个更新的小提琴。