Javascript jQuery创建可拖动的div并将x、y位置存储到文本框中

我有一个按钮，每次创建一个具有唯一id的

，该

也可以通过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>

var i=1；
$（“#添加桌面”）。单击（函数（）{
$（“”，{“类”：“deskdata”，id:“data”+i}）
.append（$（“”，{type:“text”，id:“posX”+i，style:“width:50px”}））
.append（$（“”，{type:“text”，id:“posY”+i，style:“width:50px”}））
.appendTo（“#数据容器”）；
});
$（“#添加桌面”）。单击（函数（）{
$（“”，{“类”：“桌面”，id:“D”+i}）。可拖动({
拖动：函数（）{
var offset=$（this.offset（）；
var xPos=offset.left；
var yPos=offset.top；
$（'#posX'+i）.val（'x:'+xPos）；
$（'#posY'+i）.val（'y:'+yPos）；
}
})
.append（$（“”，{type:“text”，id:“name”+i，style:“width:50px”，value:“name”}））
.附于（“#数据容器”）；
i++；
});

---

问题是由于您在拖动事件中调用了“i”。您不能调用“i”，因为它是一个增量变量，您需要获取被拖动面板的id

var i=1；
$（“#添加桌面”）。单击（函数（）{
//------------------------------------------------------------------------------------------
$（“”，{“类”：“桌面”，id:“D”+i}）。可拖动({
拖动：函数（）{
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（$（“”，{type:“text”，id:“name”+i，style:“width:50px”，value:“name”}））
.附于（“#数据容器”）；
//------------------------------------------------------------------------------------------
$（“”，{“类”：“deskdata”，id:“data”+i}）
.append（$（“”，{type:“text”，id:“posX”+i，style:“width:50px”}））
.append（$（“”，{type:“text”，id:“posY”+i，style:“width:50px”}））
.appendTo（“#数据容器”）；
//------------------------------------------------------------------------------------------
i++；
});

定义“问题”，并请提供JSFIDLE版本=）根据您的建议，我已对问题进行了编辑，以包含您提到的信息。

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