更新jQuery的可伸缩和可调整大小的动态textarea的高度宽度和风格

我有一个页面上有一个按钮，允许用户添加一个动态textareas页面，然后使用jQuery可拖动和可调整大小，他们可以移动和调整文本区域。更新jQuery的可伸缩和可调整大小的动态textarea的高度宽度和风格

我遇到的问题是当我试图通过$ _POST将高度宽度和位置传递给php。

如果用户在他/她拖动之前先调整大小，代码将很有用。

但是，如果用户先拖动，则他/她无法调整大小，只发布位置和内容。

如果用户不拖动或调整大小，则只发布textarea内容。

如何将动态创建的textareas的位置和大小传递给php。

我知道我需要有可更新的高度宽度和位置，但是我的JS知识并没有拉伸很远，因为我对JS相当新，所以任何帮助都非常感谢。

这里是我的代码：

<!DOCTYPE html> 
<html> 
<meta charset="utf-8" /> 
<? 
if($_SERVER['REQUEST_METHOD'] == "POST") { 
    for($i=0; $i<count($_POST["textarea"]);$i++) { 
    echo "text=".$_POST["textarea"][$i]."<br>"; 
    echo "left=".$_POST["left"][$i]."<br>"; 
    echo "top=".$_POST["top"][$i]."<br>"; 
    echo "height=".$_POST["height"][$i]."<br>"; 
    echo "width=".$_POST["width"][$i]."<br><br>"; 
    } 
} 
?> 
<head> 
<style> 
    body{background-color:#ccc;} 
    .dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; } 
    .textarea1{ width: 300px; height: 300px; padding: 0.5em;} 
    #handle{ 
     display: block; 
     height: 16px; 
     width: 100px; 
     background-color: red; 
     position: relative; 
     top:10px; 
     font-size:10px; 
     } 
</style> 
<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> 
</head> 

<body> 
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div2.php" method="post"> 
<script>   
var i=0;  
var p=75; 
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('contenteditable','true'); 
    newdiv.style.position = "relative"; 
    newdiv.style.top = 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='overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>"; 

    document.getElementById("frmMain").appendChild(newdiv); 
    $(function() 
    { 
    $("#"+i).draggable({handle:"#handle"}); 
     $("#"+i).resizable(
     { 
      stop: function(event, ui) 
      { 
       var width = ui.size.width; 
       var height = ui.size.height; 
       alert("width="+width+"height="+height); 
       ValProportions(width,height);   
      } 
     }); 

     $("#"+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); 
      } 
     }); 

    }); 

    function ValProportions(defaultwidth, defaultheight) { 
     newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='"+defaultwidth+"' name='width[]'><br><input type='hidden' value='"+defaultheight+"' name='height[]'>";    
     } 
    function ValPostion(defaultleft,defaulttop) { 
     newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='"+defaultleft+"' name='left[]'><br><input type='hidden' value='"+defaulttop+"' name='top[]'>";   
     } 
    i++; 
    p=p+25; 
} 
</script> 
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />  
<input type="submit" value="Submit" > 
</form> 
</body> 
</html>

来源

2013-03-06 Barry Watts

你这样做就有可能创造新的隐藏文本框什么，每次拖动/调整框的大小，因此该值将无法正常通过。通过一些修改，我得到它的工作，但我不知道这是什么意思。

<!DOCTYPE html> 
<html> 
<meta charset="utf-8" /> 
<? 
if($_SERVER['REQUEST_METHOD'] == "POST") { 
    for($i=0; $i<count($_POST["textarea"]);$i++) { 
    echo "text=".$_POST["textarea"][$i]."<br>"; 
    echo "left=".$_POST["left"][$i]."<br>"; 
    echo "top=".$_POST["top"][$i]."<br>"; 
    echo "height=".$_POST["height"][$i]."<br>"; 
    echo "width=".$_POST["width"][$i]."<br><br>"; 
    } 
} 
?> 
<head> 
<style> 
    body{background-color:#ccc;} 
    .dragbox{position:absolute;top:20px;width:320px; height:0;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:1;display: block; } 
    .textarea1{ width: 300px; height: 300px; padding: 0.5em;} 
    #handle{ 
     display: block; 
     height: 16px; 
     width: 100px; 
     background-color: red; 
     position: relative; 
     top:10px; 
     font-size:10px; 
     } 
</style> 
<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> 
</head> 

<body> 
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="drag.php" method="post"> 
<script>   
var i=0;  
var p=75; 
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('contenteditable','true'); 
    newdiv.setAttribute('iterate',i); 
    newdiv.style.position = "relative"; 
    newdiv.style.top = 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='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).draggable({handle:"#handle"}); 
     $("#"+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')); 
      } 
     }); 

    }); 

    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> 
<input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />  
<input type="submit" value="Submit" > 
</form> 
</body> 
</html>

来源

2013-03-06 12:14:18

你绝对超级巨星!!!!!!感谢您的完美工作，向您致以崇高的敬意。 – 2013-03-06 12:32:51

更新jQuery的可伸缩和可调整大小的动态textarea的高度宽度和风格

回答

相关问题