使用 jQuery UI 的 Droppable 我制作了一个架子类型的东西，其中包含的项目可以移动。这是代码：http: //jsfiddle.net/JoeyMorani/7LWj4/
是否可以实际更改架子的 HTML，因此当移动“.boxArt”div 时，它们也会在 HTML 中移动。目前它似乎只改变了 div 的位置，并没有真正移动它。
我想这样做，这样我就可以检测到 div 的位置。（他们的父 div 是什么）
谢谢您的帮助！:)
问问题
1373 次
1 回答
4
我从您的演示中对 HTML 和 CSS 进行了一些更改，但我有一些工作。HTML 更简单并且不会影响结果，但如果您需要以前的布局，我的答案可能不完全适合您。
完整的代码复制在下面以及jsFddle 演示中。分离并在 DOM 中移动后，代码实际上变得简单得多.boxArt，因为动画只需将顶部和左侧.boxArt更改为 0。唯一困难的部分是在动画之前计算正确的位置以将其设置为。这是由于可拖动元素相对于它被拖动的元素定位。一旦它在 DOM 中移动，这个位置现在是完全不正确的。因此，代码运行并首先将可拖动的相对位置设置为新父级（在 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>
于 2012-03-31T14:12:06.083 回答