我对演示中的 HTML 和 CSS 进行了一些更改，但我有一些工作。 HTML 更简单并且不会影响结果，但如果您需要以前的布局，我的答案可能并不完全适合您。
完整的代码复制在下面以及jsFiddle 演示 http://jsfiddle.net/TGubd/8/。分离后代码实际上变得简单了很多.boxArt并将其移动到 DOM 中，因为动画只需要更改top and left返回到 0。唯一困难的部分是计算正确的位置来设置.boxArt到制作动画之前。这是由于可拖动的相对地定位到它被拖动的元素。一旦它在 DOM 中移动，这个位置现在就完全不正确了。所以代码计算出来并将可拖动的相对位置设置为new首先（将其移动到 DOM 中之后）然后动画回到top:0,left:0.
这在 Chrome 中对我有用，但我尚未在任何其他浏览器中进行测试。console.log留下来显示发生了什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.shelfRow {
width:1865px;
height:280px;
}
#shelves {
position:relative;
width:950px;
height:566px;
background:#CCC;
border:1px solid #333;
overflow-y:hidden;
overflow-x:auto;
}
.drop {
width:155px;
height:200px;
padding:2px;
margin-top:30px;
margin-left:25px;
float:left;
position:relative;
}
.dropHover {
padding:0px;
border:2px solid #0C5F8B;
-webkit-box-shadow: 0 0 3px 1px #0C5F8B;
box-shadow: 0 0 3px 1px #0C5F8B;
-moz-box-shadow: 0 0 20px #0C5F8B;
}
.boxArt {
width:155px;
height:200px;
-webkit-box-shadow: 0 0 8px 1px #1F1F1F;
box-shadow: 0 0 8px 1px #1F1F1F;
-moz-box-shadow: 0 0 20px #1F1F1F;
color:#000;
background:#FFF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));
$('.drop').droppable({
accept: function(el) {
return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
},
tolerance: 'intersect',
hoverClass: 'dropHover',
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
var originalOffset = ui.draggable.data('originalOffset');
console.log('originalOffset', originalOffset.top, originalOffset.left);
var boxArt = $(this).children('div');
var boxPosition = boxArt.position();
console.log('boxArt position', boxPosition.top, boxPosition.left);
var container = $(this);
var containerPosition = container.position();
console.log(container, containerPosition.top, containerPosition.left);
var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;
console.log('new offset', newTop, newLeft);
boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
}
});
$('.boxArt').draggable({
start: function(event, ui) {
$(this).data('originalOffset', ui.offset);
},
revert: 'invalid'
});
});
</script>
</head>
<body>
<div id="shelves">
<div class="shelfRow">
<div class="drop"></div>
<div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div id="drop15"></div>
</div>
<div class="shelfRow">
<div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</div>
</body>
</html>
