javascript dynamic textarea 및 nicedit

몇 사람의 큰 도움을 받아 여기에서 동적 크기 조정 가능/드래그 가능 텍스트 영역을 만드는 페이지를 만들었습니다. 나는 이제이 텍스트 영역에 대한 정보를 제공하려고 노력 중이다. 그것의 요점을 작동합니다. 두 번 클릭하면 텍스트 영역이 nicedit 영역이되지만 불행하게도 draggable 이벤트가 nicedit를 재정의하므로 텍스트 영역을 편집 할 수 없습니다. 나는 누군가가 내 방법으로 사전에javascript dynamic textarea 및 nicedit

감사의 오류를 지적 할 수있는 희망 그래서

내 자바 스크립트가 제한됩니다. 여기

내가 사업부의 MouseDown 이벤트에 사용 인 stopPropagation()에 의해이 문제를 해결하기 위해 관리

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

출처

2013-03-11 Barry Watts

사람들을 도와 줄 수 있도록 [피들] (http://jsfiddle.net)에 올려보세요. 빨리 밖으로. – Shouvik

확인 추가됨 jsfiddle 위의 텍스트 링크 감사합니다. jsfiddle에 대해 아는 것이 없습니다. –