概述
问题
当我开始在“#container”中移动图像时出现问题。下次我将图像从“#products”拖动到“#container”时，图像将落入正常的元素流中，而不会意识到元素已被移动。图像中的结果可能位于另一个图像的顶部，从而覆盖它。
这可能与位置有关：移动元素时，相对保持不变。
非常感谢您的帮助。
我打算将它作为jQuery插件发布。如果他们愿意，任何帮助他们工作的人都会被记入。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// --------------
// - Image swap -
// --------------
// The user can drag an image from "#products" to "#container". They will fall into the normal flow of elements.
// All images inside of "#container" can be dragged around in side that container in a grid.
// If an image is dropped where another image are, they swap places.
// Setting global variables.
var dragged = null;
// Make a clone of a image from the "#products" container.
$(".product").draggable({
helper: 'clone'
});
// Make "#container" a droppable and only accept images with ".product" class.
$("#container").droppable({
// Only accept images with ".product" class.
accept: '.product',
drop: function(event, ui) {
// When clone of image from "#products" gets dropped on "#container" it is added to "#container".
// After that we change the class name to "item".
$(this).append(ui.draggable.clone().addClass("item").removeClass("product"));
// Images with class "item" in "#container" are made draggable.
$(".item").draggable({
// Prevent draggables to go outside "#container".
containment: 'parent',
// Make sure that draggables only can be in 9 positions in a grid.
grid: [150,150],
start:function(event, ui) {
// When image is dragged, make sure it is always on top.
$(this).css({'z-index' : '100'});
// Get position where the dragging got started.
dragged = $(this).position();
// Below line can be uncommeted if you use Firebug and Firefox so you can trace variable "dragged".
//console.debug("Dragged: ",dragged);
},
stop: function(event, ui) {
// Revert to original layer position.
$(this).css({'z-index' : '10'});
}
});
// Inside the "#container" we make all images droppables.
$(".item").droppable({
drop: function(event, ui) {
// If a clone dragged from "#products" over an existing image in "#container" do not do below.
if(dragged!=null) {
// Get position of the image where another image from "#container" was dropped on.
var dropped_on = $(this).position();
var drop_top = $(this).css("top");
var drop_left = $(this).css("left");
// All images has the css property position:relative. Therefore it is needed to calculate the
// where to move the dropped on image relative to it's current position.
var newTop = dragged.top - (dropped_on.top - parseInt(drop_top));
var newLeft = dragged.left - (dropped_on.left - parseInt(drop_left));
// Only move dropped on image since dragged image has been dropped in the right position.
$(this).css({'top' : newTop, 'left' : newLeft});
// Below lines can be uncommeted if you use Firebug and Firefox so you can trace variables.
// console.debug("newTop: ",newTop," newLeft: ",newTop);
// console.debug("drop_top: ",drop_top," drop_left: ",drop_left);
}
}
});
}
});
});
</script>
<style>
body {
}
#container {
width:450px;
height:450px;
border:1px solid #000;
}
.item {
width:150px;
height:150px;
z-index:10;
cursor:move;
}
#products {
position:absolute;
width:450px;
height:450px;
top:9px;
left:550px;
border:1px solid #000;
}
.product {
}
#testarea {
position:absolute;
width:450px;
height:450px;
top:9px;
left:1100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="container">
</div>
<div id="products">
<img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="product" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="product" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="product" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="product" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="product" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="product" alt="" title="" />
</div>
</body>
</html>