Question

我不是很有经验，希望有人能给我一些提示。

我正在尝试创建一个系统，在这个系统中，图像可以从一个容器传输到一个操纵容器，在那里可以重新调整大小和拖动它们。

我在这里有一个操纵：Fiddle Demo

我正试图让“点击/双击”系统在这里工作：Fiddle Demo

<div class="frame"></div>

<div class="inventory">
     <images>
</div>


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


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

});

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

非常感谢任何帮助！

谢谢！

Answer 1

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

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

演示：Fiddle

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

Answer 2

我更新了Arun P Johny的小提琴：http://jsfiddle.net/u4xKW/2/。

$(".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");
});

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

在追加元素的同时维护js

2 个答案: