0

我有一个带有嵌套可调整大小的 div 的可拖动 div，然后嵌套在其中我有一个可使用 nicedit 编辑的 div。

这一切都在 jsfiddle 中运行得非常好，但是当我在我的网络服务器上运行它时 stopPropagation(); 完全停止可拖动和调整大小的运行。

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

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

当我把头撞在墙上时，任何帮助都非常感激。

jsfiddle - http://jsfiddle.net/j6FLa/2/

网络服务器上的代码

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

1 回答 1

0

好的，这就是我解决它的方法。如果我将 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>
于 2013-05-24T12:28:23.290 回答