Search code examples
javascriptjquerydraggableresizablestoppropagation

stopPropagation not working on draggable resizble div

I have a div which is draggable and resizable.

On double click I want to use stopPropagation to make the contents of the div to be selectable.

But for some reason the stopPropagation is not working.

can anybody please have a look at my code and see where I am going wrong?

heres a jsfiddle

http://jsfiddle.net/j6FLa/16/

and the code

<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>
Solution

  • Could be a kind of workaround:

    DEMO

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

    Or better:

    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' )
    }
});