Question

我有一个可拖动且可调整大小的div。

双击我想使用stopPropagation使div的内容可供选择。

但由于某种原因，stopPropagation无效。

任何人都可以查看我的代码，看看我哪里出错了吗？

heres a jsfiddle

和代码

<HTML>
<HEAD>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src= "http://js.nicedit.com/nicEdit-latest.js"></script>
<style>
 .dragbox {
 position:absolute;
 width:10px;
 height:25px;
 padding: 0.0em;
 margin:25px;
 cursor:move;
 z-index:2
 }
</style>
</HEAD>

<BODY>
<script>
//<![CDATA[
bkLib.onDomLoaded(function () {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    myNicEditor.addInstance('draggable');
});
//]]>


$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor','select');
    e.stopPropagation();
});

$(function () {
    $("#draggable").draggable().resizable();
});
</script>
<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" style="width:300px;height:300px;background-color:#ff0000;padding:25px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>
</BODY>
</HTML>

Answer 1

可能是一种解决方法：

DEMO

$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor','select');
    $(this).draggable( 'disable' ).removeClass('ui-state-disabled').focus();
}).on('blur',function(){
    $(this).draggable( 'enable' );
});

或更好：

DEMO

$("div.dragbox").dblclick(function (e) {
    if(!$(this).data('editing')){
    $('.dragbox').css('cursor','select');
    $(this).draggable( 'disable' ).removeClass('ui-state-disabled').focus();
        $(this).data('editing',true);
    }
    else {
        $(this).data('editing',false);
         $(this).draggable( 'enable' )
    }
});

stopPropagation无法处理可拖动的可调整大小的div

1 个答案: