>
#mydiv
{
寬度：900px;
背景顏色：#444;
位置：絕對；
左：100px；
}
img
{
寬度：200px;
高度：200px;
}
ul
{
列表樣式類型：無；高度：200px;
}
ul li
{
顯示：內聯;
}
樣式>
$(function () {
//儲存是被拖曳的圖片的靈魂座標
var startleft = 0;
var starttop = 0;
$('img') .draggable({
start: function () {
//為兩個控制設定被拖曳圖片的靈魂座標
startleft = $(this).offset().left;
starttop = $(this ).offset().top;
},
stop: function () {
if ($(this).offset().left > $('#mydiv') .offset(). left $('#mydiv').width() || $(this).offset().top > $('#mydiv').offset().top $('#mydiv' ).height()) {
$(this).remove()}
else {
//重置
$(this).offset({
left: startleft,
top: starttop
})
}
}
})
;
頭>
身體>
效果圖
