I have a draggable div with a nested resizable div and then nested inside this I have a div that is editable with nicedit.
it all works wonderfully within jsfiddle but when I run it on my webserver the stopPropagation(); stops the draggable and resizable running at all.
If I comment out the stopPropagation(); event, then it all works but I am unable to edit the text.
I know its probably something really simple as it works on jsfiddle.
any help greatly appreciated as I am banging my head against the wall.
the jsfiddle - http://jsfiddle.net/j6FLa/2/
the code on the webserver
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<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 = "js/nicEdit-latest.js"></script>
<script>
//<![CDATA[
bkLib.onDomLoaded(function () {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('content');
});
//]]>
var contentclick = document.getElementById('content');
contentclick.style.cursor = "select";
contentclick.onmousedown = function (event) {
event.stopPropagation();
};
$(function() {
$( "#draggable" ).draggable();
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="myNicPanel" style="width: 525px;"></div>
<br>
<br>
<div id="draggable" class="dragbox">
<div id="resizable" style="width:300px;height:300px;background-color:#ff0000;padding:25px;">
<div id="content" style="width:100%; height:100%; background-color:#ffffff;border: 1px solid #000;display:block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>
</div>
</div>
</body>
</html>
ok this is how I solved it. If I put the stoppropagation function inside another function and then call that function from a onclick event within the editable div then it all works
<!doctype html>
<html lang="en">
<head>
<style>
.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}
</style>
<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.9.2/jquery-ui.js"></script>
<script src = "js/nicEdit-latest.js"></script>
<script>
//<![CDATA[
bkLib.onDomLoaded(function () {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('content');
});
//]]>
function myEventHandler(e)
{
var contentclick = document.getElementById('content');
contentclick.style.cursor = "select";
contentclick.onmousedown = function (event) {
event.stopPropagation();
};
}
$(function() {
$( "#draggable" ).draggable();
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="myNicPanel" style="width: 525px;"></div>
<br>
<br>
<div id="draggable" class="dragbox">
<div id="resizable" style="width:300px;height:300px;background-color:#ff0000;padding:25px;">
<div id="content" style="width:100%; height:100%; background-color:#ffffff;border: 1px solid #000;display:block" onclick="myEventHandler(event);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>
</div>
</div>
</body>
</html>