jQuery创建可拖动div并将x，y位置存储到文本框

Question

我有一个按钮，每次都会创建一个带有唯一标识的<div>，该<div>也可以通过jQuery拖动。 jQuery首先将一组输入框附加到主可拖动区域之外的窗体上。然后将可拖动的内容附加到容器中。

我想使用拖动事件来存储x，y位置到输入框，但我有问题，其中x，y位置不返回到窗体内的文本框。

这是我想获得工作的代码：

<input type="button" name="AddDesk" id="AddDesk" value="Normal Desk" /> 
<div id="dContainer"> 
</div> 
<form name="FormName" action="?cmd=function.save.layout" method="post"> 
<input type="submit" name="save" value="save" /> 
<div id="dataContainer"> 
</div> 
</form> 

<script type="text/javascript"> 
var i = 1; 
$("#AddDesk").click(function() { 
    $("<div />", { "class":"deskdata", id:"data"+i }) 
    .append($("<input />", { type: "text", id:"posX"+i, style: "width:50px" })) 
    .append($("<input />", { type: "text", id:"posY"+i, style: "width:50px" })) 
    .appendTo("#dataContainer"); 
}); 
$("#AddDesk").click(function() { 
    $("<div />", { "class":"desk", id:"D"+i }).draggable({ 
     drag: function(){ 
      var offset = $(this).offset(); 
      var xPos = offset.left; 
      var yPos = offset.top; 
      $('#posX'+i).val('x:' + xPos); 
      $('#posY'+i).val('y:' + yPos); 
     } 
    }) 
    .append($("<input />", { type: "text", id:"name"+i, style: "width:50px", value: "NAME" })) 
    .appendTo("#dContainer"); 
    i++; 
}); 
</script> 

jsfiddle version

Answer 1

的问题是由于你的电话你拖动事件为“我”。您不能调用“i”，因为它是一个增量变量，您需要获取拖动面板的ID。

http://jsfiddle.net/TXp74/

var i = 1; 
$("#AddDesk").click(function() { 
    //------------------------------------------------------------------------------------------ 
    $("<div />", { "class":"desk", id:"D"+i }).draggable({ 
     drag: function(){ 
      var offset = $(this).offset(); 
      var xPos = offset.left; 
      var yPos = offset.top; 
      console.log(xPos); 
      $('#posX'+$(this).attr("id").replace('D','')).val('x:' + xPos); 
      $('#posY'+$(this).attr("id").replace('D','')).val('y:' + yPos); 
     } 
    }) 
    .append($("<input />", { type: "text", id:"name"+i, style: "width:50px", value: "NAME" })) 
    .appendTo("#dContainer"); 
    //------------------------------------------------------------------------------------------ 
    $("<div />", { "class":"deskdata", id:"data"+i }) 
    .append($("<input />", { type: "text", id:"posX"+i, style: "width:50px" })) 
    .append($("<input />", { type: "text", id:"posY"+i, style: "width:50px" })) 
    .appendTo("#dataContainer"); 
    //------------------------------------------------------------------------------------------ 
    i++; 
});