javascript - 拖动动态创建的文本字段

Question

JSFiddle:http://jsfiddle.net/6q9hn5Ln/2/

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

问题出在这里:

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

Answer 1

您可以使用function包装interact调用

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

在$('#OuterWrapper').append(outWrap);

之后

Updated fiddle .