Javascript 将多个文本字段拖放到多个位置

我正在使用interact.js-请参阅下面的代码。如何将多个文本字段拖放到多个位置？此时，所有文本字段使用相同的起始位置

var x=0，y=0。因此，文本字段将捕捉到最终文本字段被拖动到的位置。因此，我无法将每个文本字段拖到不同的位置

还可以限制在其父DIV内的拖动。在我的情况下，仅允许在
户外说唱机内进行拖动

<button type="button" id="tfButton">Add a Thought</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper" style="width:500px; height:500px; background-color: #ff6; margin-left:200px;"></div>

<script>
var itmCount = 0;
$(function() {
    function createFields(e) {
        itmCount++;
        var inWrap = $('<div />', { class: 'name-wrapper', id: 'inWrap_'+itmCount }),
            nameWrap = $('<div />', { class: 'name' }).appendTo(inWrap),
            outWrap = $('<div />');

        nameWrap.append(
            $('<input />', { class: 'fTypex', placeholder: 'Thought of the day...', type: 'textarea', id: 'nameWrap_'+itmCount })
        );

        outWrap.append(
            $('<input />', { type: 'textarea', class: 'tfz', id: 'outWrap_'+itmCount})
        );

        $('#InputsWrapper').append(inWrap);
        $('#OuterWrapper').append(outWrap);
    }
    $(document)
        .on('click', '#tfButton', createFields)
})


var x = 0, y = 0;
interact('.tfz')
    .draggable({
        onmove: function (event) {
            x += event.dx;
            y += event.dy;

            event.target.style.webkitTransform =
            event.target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        }
    })
    .inertia(true)
    .restrict({
        drag: "parent",
        endOnly: true
    });
</script>

添加一个想法
var-itmCount=0；
$（函数（）{
函数createFields（e）{
itmCount++；
var inWrap=$（''，{class:'name wrapper'，id:'inWrap_'+itmCount}），
nameWrap=$（''，{class:'name'}）.appendTo（inWrap），
外推=$（''）；
nameWrap.append(
$（“”，{class:'fTypex'，占位符：'thinkoftheday…'，键入：'textarea'，id:'nameWrap_u'+itmCount}）
);
外挂(
$（''，{type:'textarea'，class:'tfz'，id:'outrap_'+itmCount}）
);
$（'#InputsWrapper'）。追加（inWrap）；
$（“#外套者”）。附加（外套）；
}
$（文件）
.on（'click'，'tfButton'，createFields）
})
变量x=0，y=0；
交互（'.tfz'）
.拖拉({
onmove：函数（事件）{
x+=event.dx；
y+=event.dy；
event.target.style.webkitTransform=
event.target.style.transform=
'翻译（'+x+'px'，+y+'px）'；
}
})
.惯性（真实）
.限制({
拖动：“父”，
内：对
});