Question

我有一个带有按钮的页面，允许用户向页面添加动态textareas，然后使用jquery draggable和resizeable，他们可以移动和调整textareas的大小。

我遇到的问题是当我试图通过$ _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>

Answer 1

您在每次拖动/调整框大小时都会创建新的隐藏文本字段，因此该值无法正确传递。通过一些修改，我得到它的工作，但我不确定这是不是你的意思。

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

在jquery draggable和resizable上更新动态textarea的高度宽度和样式

1 个答案: