jQuery draggable working in jsfiddle but not on webserver

StackOverflow https://stackoverflow.com/questions/16731254

Question

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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top