jQuery拖動appendTo後

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。