0

サイズ変更可能な div がネストされたドラッグ可能な div があり、その中にネストされている nicedit で編集可能な div があります。

それはすべてjsfiddle内で素晴らしく機能しますが、Webサーバーで実行すると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 に答える