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。