拖动动态创建的文本字段

Question

JSFIddle：http://jsfiddle.net/6q9hn5Ln/2/

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

问题在于：

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

您可以使用interact

打包function

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

Answer 2

定位课程.tfz，因为该课程适用于所有输入。

interact('.tfz')

Updated Fiddle