1

ドラッグ可能な div と html ボタンがあります。

ボタンがクリックされたときに stopPropagation を使用して div のドラッグを停止したいのですが、何らかの理由でドラッグ可能なイベントがまだ機能しています。

誰でも私のjsfiddleを見て、どこが間違っているのかを確認できますか

ここにjsfiddleがありますhttp://jsfiddle.net/Dp2z6/3/

そしてコード

#draggablediv {
 background-color:#ff0000;
 width:100px;
 height:100px;
 top:50px;
 left:50px;
}

#editBtn {
 font-size:12px;
}

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

$('#editBtn').click(function (event) {
  event.stopPropagation();
  focusDiv();
});

function focusDiv() {
  $('#draggablediv').focus();
}

<div id="draggablediv">draggable Div
 <br>
 <input type="button" id="editBtn" value="click me">
</div>
4

2 に答える 2

2

あなたがしたいことは、ボタンがクリックされたときにドラッグ可能な動作を停止することです。ボタンのイベントが親 div にバブリングするのを防ぐだけですが、直接event.stopPropagation();クリックしても何が起こるかには影響しません。draggablediv

disableまたはdestroyドラッグ可能なウィジェット メソッドを使用して、ドラッグ可能な動作を停止します。これらの違いについては、ドラッグ可能なウィジェットのAPI ページを参照してください。

$('#editBtn').click(function (event) {
    $("#draggablediv").draggable('destroy')
    focusDiv();
});

ワーキングデモ

于 2013-07-23T12:08:21.637 に答える
1

あなたstopPropogation()はclickイベントの伝播を止めています。

ドラッグ可能性 (完全に単語) を削除するには、 を使用します.draggable('destory')。

$('#editBtn').click(function (event) {
    event.stopPropagation();
    $('#draggablediv').draggable( 'destroy' );
    focusDiv();
});

Jsフィドル。

注: を使用することもできます .draggable('disable')が、これには奇妙な CSS の副作用が伴い、望ましい場合とそうでない場合があります。要素が実際に無効になっているという有用なフィードバックをユーザーに提供します。

于 2013-07-23T12:14:18.230 に答える