在追加元素的同时维护js

Question

I'm not super experienced and was hoping someone could give me some tips.

I'm trying to create a system where images can be transferred from a holding container to a manipulative container where they can be re-sized and dragged.

I have a manipulative here: Fiddle Demo

And am trying to get the "click in/double-click out" system to work here: 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');

});

The main problem I believe is that once I append the divs, the js doesn't refresh and apply based on the arrangements of elements.

Any help would be greatly appreciated!

Thank you!

Answer 1

Since the evaluation of the selectors need to be dynamic you need to use event delegation

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

Demo: Fiddle

Note: This will not handle the resizable/draggable behaviors - you will need to manually destroy/add this behaviors when you move the element from one container to another one

Answer 2

I updated Arun P Johny's fiddle: 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");
});

This adds and removes the draggable and resizable functions from the items when they are added and removed.