2014-11-25 6 views
0

jquery 및 jquery UI를 사용하여 이미지를 드래그하고 크기를 조절합니다. 또한이 이미지를 대상 div에 추가해야합니다.특정 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> 

정말 고마워요!

답변

1

낙하 할 contenHolder 확인 :

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

});