Javascript 在添加元素时维护js

我不是很有经验，希望有人能给我一些建议

我正在尝试创建一个系统，在这个系统中，图像可以从一个固定的容器传输到一个可操纵的容器，在这个容器中，图像可以重新调整大小并拖动

我这里有一个操纵者：

我正在尝试让“点击进入/双击退出”系统在这里工作：

$（“.frame img”）
.拖拉({
遏制：“家长”，
光标：“移动”
}).可调整大小({
方面：1，
遏制：“家长”，
身高：50，
最小宽度：50
});
$（'.inventory img'）。单击（函数（）{
$（此）.appendTo（“.frame”）；
});
$（'.frame img'）.dblclick（function（）{
美元（本）。附于（“.inventory”）；
$（this.removeClass（'added'）；
});

我认为主要的问题是，一旦我添加了div，js就不会根据元素的排列进行刷新和应用

任何帮助都将不胜感激

---

谢谢大家!

由于选择器的评估需要是动态的，因此您需要使用事件委派

$('.inventory').on('click', 'img', function () {
    $(this).appendTo(".frame");
});
$('.frame').on('dblclick', 'img', function () {
    $(this).appendTo(".inventory");
    $(this).removeClass('added');
});

演示：

---

注意：这不会处理可调整大小/可拖动的行为-当您将元素从一个容器移动到另一个容器时，需要手动销毁/添加此行为

---

这将在添加和删除项目时从项目中添加和删除可拖动和可调整大小的功能。

Awesome！非常感谢。你知道我如何让它们在.frame下可操作吗？与第一个链接类似，我希望能够在.frame下移动图像并调整其大小。这回答了问题吗？谢谢！如果不是太麻烦的话，我还想让它做几件事。看这里：。我希望，当图像被dblclick回黄色框架时，它们会恢复到.inventory img{}中指定的大小，采取阻塞位置，而不是重叠。有什么想法吗？是的，我可能会使用函数来存储对象的尺寸，并在双击对象时检索/使用它们。由于您没有使用内联样式，我们可以删除由调整大小和拖动函数添加的样式属性。以下是更新的fiddle:Code change:.removeAttr（“样式”）

$('.inventory').on('click', 'img', function () {
    $(this).appendTo(".frame");
});
$('.frame').on('dblclick', 'img', function () {
    $(this).appendTo(".inventory");
    $(this).removeClass('added');
});

$(".frame img")
    .draggable({
    containment: "parent",
    cursor: "move"
}).resizable({
    aspectRatio: 1,
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});

$('.inventory').on('click', 'img', function () {
    $(this).resizable({
        aspectRatio: 1,
        containment: "parent",
        minHeight: 50,
        minWidth: 50
    });

    $(this).parent().appendTo(".frame").draggable({
        containment: "parent",
        cursor: "move"
    });
});

$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).appendTo(".inventory");
    $(this).draggable("destroy");
    $("img", this).resizable("destroy");
});