jQuery append 후

Question

많은 사례를 발견했지만 필요한 모든 것에 너무 복잡했습니다.

여기 내 코드입니다 :

$(function() { 
    jQuery(".drag").click(function() { $(this).appendTo(".inner")}); 
    jQuery(".drag").draggable({ grid: [ 10, 10 ] }, { containment: ".inner" }); 
}); 

나는 내가하고자하는 컨테이너에 추가 한 후에 만 ​​같은 요소를 드래그하고 싶습니다.

드래그 요소는 드래그 할 컨테이너 바깥에 있다는 점에 유의하십시오. 그래서 appendTo를 사용합니다.

HTML :

... 
    <div class="inner"></div> 
    ... 

    <div class="objects"> 
    <div class="drag"><img src="img1.jpg" title="name1" /></div> 
    <div class="drag"><img src="img2.jpg" title="name2" /></div> 
    <div class="drag"><img src="img3.jpg" title="name3" /></div> 
    </div> 
... 

Answer 1

당신이하려고하지만, jQuery를 UI 이벤트 start 당신에게 도움이 될 수 있습니다 무엇 확실하지 :

$(function() { 
    jQuery(".drag").draggable({ 
     grid: [ 10, 10 ], 
     containment: ".inner", 
     start: function() { $("#result").html("Drag start!"); } 
    }); 
});​ 

HTML :

<div class="inner"> 
    Inner div 

<div class="drag"> 
</div> 
</div> 
<p id="result"></div> 

CSS :

를

div { border:1px solid black; padding:5px; } 
.inner { width: 200px; height:200px; } 
.drag { width:50px; height: 50px; background-color:#fca;}​ 

this jsFiddle을 참조하십시오.