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

听起来您想要做的是在单击按钮时停止可拖动行为。event.stopPropagation();只会阻止按钮上的事件冒泡到父 div，但不会影响draggablediv直接单击时发生的情况。

您将需要使用disableor 或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();
});

JsFiddle。

注意：您也可以使用 .draggable('disable')，但这带有一个奇怪的 CSS 副作用，可能需要也可能不需要。它确实向用户提供了该元素实际上已被禁用的有用反馈。

于 2013-07-23T12:14:18.230 回答