Question

我有一个带有嵌套可调整格式div的可拖动div，然后嵌套在里面我有一个可以用nicedit编辑的div。

它在jsfiddle中运行得非常好但是当我在我的web服务器上运行它时，stopPropagation（）;停止可拖动和可调整大小的运行。

如果我注释掉stopPropagation（）;事件，然后一切正常，但我无法编辑文本。

我知道它可能非常简单，因为它适用于jsfiddle。

任何帮助都非常感激，因为我正撞在墙上。

网络服务器上的代码

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

Answer 1

好的，这就是我解决它的方式。如果我将stoppropagation函数放在另一个函数中，然后从可编辑div中的onclick事件调用该函数，那么一切正常

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

jQuery draggable在jsfiddle中工作但不在webserver上工作

1 个答案: