0

動的に作成された div にネストされたテキストエリアを動的に作成しました。div はドラッグ可能で、テキストエリアは jquery を使用してサイズ変更できます。

ユーザーが特定のテキストエリアをクリックしたときにのみ、特定の div/textarea の境界線とドラッグ/サイズ変更ハンドルが表示されるようにします。ドラッグ可能なものと同じonclickイベントを使用する必要があると思いますが、ハンドルとボーダーを表示するためのjsの知識がありません。

どんな助けでも大歓迎です

ここに私のコードがあります

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<style>
  body{background-color:#ccc;}
  .dragbox{width:10px; height:10px;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:2}
  .textarea1{ width: 300px; height: 300px; padding: 0.5em; z-index:3}
  #handle{
      display: block; 
      height: 16px; 
      width: 100px; 
      background-color: red;
      position: absolute;
      top:-15px;
      left:0px;
      font-size:10px;
      }
     #content
        {
            position:absolute;
            top:150px;
            left:0px;
            margin:auto;
            z-index:1;
        }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />  
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
<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>        
var i=0;    
var p=25;   



}
function editor1(idf) {
//var body = document.body;
// The magic
document.getElementById(idf).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);
};

function NewTextArea(id)
{       
id=id+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 +"'  onDblClick='editor1("+i+")' name='textarea["+i +"]' class='textarea1' 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='"+i+"' name='id["+i+"]'><br><input name='box_type["+i+"]' type='hidden' value='text'/>"; 
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>



</head>

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

<input type="submit" value="Save Page"  >


</form>
</body>
</html>
4

1 に答える 1

1

質問を正しく理解していれば、これは CSS だけで実行できます。

textarea { resize:none; border:none; }
textarea:focus { resize:both; border:1px solid #000; }

JSFiddle の例。

于 2013-03-14T11:07:15.570 に答える