使用 jQuery UI 的 Droppable 我制作了一个架子类型的东西，其中包含的项目可以移动。这是代码：http://jsfiddle.net/JoeyMorani/7LWj4/
是否可以实际更改架子的 HTML，所以当 '.boxArt' div 移动时，它们也会在 HTML 中移动。目前它似乎只改变了 div 的位置，并没有真正移动它。
我想这样做，以便检测 div 的位置。 （他们的父 div 是什么）
感谢您的帮助！ :)
【问题讨论】：
标签： html jquery-ui jquery-ui-droppable
我对您的演示中的 HTML 和 CSS 做了一些更改，但我有一些工作。 HTML 更简单，不会影响结果，但如果您需要以前的布局，我的答案可能不完全适合您。
完整的代码在下面以及jsFddle demo 中重复。在分离.boxArt 并将其移动到 DOM 之后，代码实际上变得简单了很多，因为动画只需将 top 和 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>
【讨论】：