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++; 
});