Добавить перетаскиваемое изображение в конкретный div

Question

Я использую jquery и jquery ui для перетаскивания и масштабирования изображений. Также мне нужно добавить это изображение в целевой div.

мой код:

<div id="decorations"> 

<div style="float:left; margin-left:5px; margin-top:5px;"> 
<img class="dragger" id="obj1" style="cursor: -webkit-grab;" src="objects/bike.png" width="80" height="80"> 
</div> 

<div style="float:left; margin-left:5px; margin-top:5px;"> 
<img class="dragger" id="obj2" style="cursor: -webkit-grab;" src="objects/car.png" width="80" height="80"> 
</div> 

</div> 

Я пытаюсь добавить перетаскиваемое изображение, когда я оставить его на сОн ниже:

<div id="contentHolder"></div> 

Код:

<script> 
$(document).ready(function() { 
window.zindex = 999; 
    $(".dragger").resizable({handles: 'ne, se, sw, nw'}); 
    $(".dragger").parent().draggable({ 
    $(".dragger").appendTo("#contentHolder"); //Tried this one without luck 
    }); 
}); 
</script> 

Также я попробовал это:

<script> 
$(document).ready(function() { 
window.zindex = 999; 
    $(".dragger").resizable({handles: 'ne, se, sw, nw'}); 
    $(".dragger").parent().draggable({  
    accept: '.dragger', 
     drop: function (event, ui) { 
      $('#contentHolder').append(ui.draggable); 
     } 
    }); 
}); 
</script> 

Большое вам спасибо!

Answer 1

Сделать contenHolder Droppable:

$(".contenHolder").droppable({  
    drop: function(event, ui) {   
     //do something here 
    }  

});