1

在这里几个人的大力帮助下，我设法创建了一个页面，可以动态创建动态可调整大小/可拖动的文本区域。我现在正在尝试将 nicedit 集成到这些文本区域中。它工作到一定程度。双击时，textarea 变成了 nicedit 区域，但不幸的是，可拖动事件甚至覆盖了 nicedit，因此无法编辑 textarea。

我的 javascript 是有限的，所以我希望有人能指出我的方式的错误

提前致谢。

这是 jsfiddle 链接http://jsfiddle.net/JVhpJ/9/

这是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">       
    <script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>   
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>  
    <script>
        window.onload = function () {
            var body = document.body;
            // The magic
            body.addEventListener ("dblclick", function (event) {
                var target = event.target;

                if (target.nodeName === "TEXTAREA") {
                    var area = new nicEditor ({fullPanel : true}).panelInstance (target);

                    area.addEvent ("blur", function () {
                        this.removeInstance (target);
                    });
                }
            }, false);
        }
    var i=0;    
    var p=25;   
    function creatediv1(id)
    {   
        id=id+i;
        var xp=xp+i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('iterate',i);
        newdiv.style.position = "relative";
        newdiv.style.top = p;
        newdiv.style.left = p;
        newdiv.style.cursor='move';
        newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
        newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";               
        newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";           

        document.getElementById("frmMain").appendChild(newdiv);
        $(function()
        {

            $("#"+i).resizable(
            {
                stop: function(event, ui)
                {
                    var width = ui.size.width;
                    var height = ui.size.height;
                   // alert("width="+width+"height="+height);
                    ValProportions(width,height,ui.element.context.id);           
                }
            });

            $( "#"+id ).draggable(
            {
                stop: function(event, ui)
                {
                    Stoppos = $(this).position();
                   $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                       // alert("left="+Stoppos.left+"top="+Stoppos.top);
                    ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));   
                }
            }); 
             $("#"+i).draggable({handle:"#handle"});  
        });  

        function ValProportions(defaultwidth, defaultheight,id)  { 
            $('#width'+id).val(defaultwidth);
            $('#height'+id).val(defaultheight);
            }
        function ValPostion(defaultleft,defaulttop,id)  {  
            $('#left'+id).val(defaultleft);
            $('#top'+id).val(defaulttop);
            }
        i++;
        p=p+25; 

    }
    </script>
    <style>
        textarea {
            height: 100px;
            margin-bottom: 20px;
            width: 1000px;
        }
    </style>
</head>

<body>
   <form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post">
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />             
    <input type="submit" value="Submit"  >
   </form>
</body>

4

1 回答 1

0

我设法通过在 div 的 mousedown 事件上使用 stoppropagation() 来解决此问题，这使我可以在没有可拖动覆盖编辑功能的情况下编辑文本

于 2013-06-04T08:16:38.810 回答