1

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")
  });
});
4

1 に答える 1

1

mousedown目的を達成する1つの方法は、イベントが閉じるボタンからDOMツリーをバブリングしないようにすることです。

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

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

更新されたフィドルはここにあります。

于 2013-01-16T15:30:49.280 に答える