Javascript 拖动动态创建的文本字段

JSFIddle：

有人能告诉我如何使用下面的脚本拖动多个文本框吗？目前，这只拖动一个文本框

问题在于：

var x = 0, y = 0;
interact('#outWrap_1') //how to set this to function with multiple text fields?
    .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: "#OuterWrapper",
        endOnly: true
    });

---

将类

.tfz

作为目标，因为该类应用于所有输入

interact('.tfz')

---

您可以将

交互

调用与

函数

function addInteract(interactId)
{
    var x = 0, y = 0;
    interact('#' + interactId).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: "#OuterWrapper",
        endOnly: true
    });
}

再加上

addInteract('outWrap_' + itmCount);

在<代码>$（'#外套者'）之后追加（外套）

---

.

对于所有可拖动的元素，您没有使用相同的

x

和

y

解决问题-因此拖动看起来很奇怪。你们能更新你们的答案吗？是的，问题是ID。ID只对一个元素有效，所以只有一个元素是可拖动的。因此，每个元素的ID都应该是唯一的。：）@好吧，是的。只有两种方法：为每个具有唯一ID的新元素初始化

interact

（如我所做的），或为元素的类使用

interact

（如APAD1所建议的），但您应该为每个元素使用分隔的

x

和

y

。