2013-07-01 6 views
0

У меня есть div, который можно перетаскивать и изменять размер.stopPropagation не работает на draggable resizble div

При двойном щелчке я хочу использовать stopPropagation, чтобы сделать содержимое div возможным.

Но по какой-то причине stopPropagation не работает.

Может кто-нибудь, пожалуйста, взглянуть на мой код и посмотреть, где я иду не так?

Херес jsfiddle

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

и код

<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> 
+0

мой inblox говорит, что я 3 комментарии по этому вопросу, но они не отображаются на странице ... какие-то идеи? –

ответ

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

, который, кажется, работает на скрипке. Я стараюсь это делать на моем веб-сервере ... cheers –

+0

no does not работает ни в одном из браузеров :-( –

+0

у вас есть кэш, без причины он работает в jsfiddle, но не на вашем сервере –

Смежные вопросы