jQuery：交换图像-几乎完成
概述jQuery：交换图像-几乎完成,jquery,drag-and-drop,Jquery,Drag And Drop,概述 用户可以将图像从“产品”拖动到“容器”。它们将进入元素的正常流动 “容器”内的所有图像都可以在网格中的容器一侧拖动 在“#容器”中，如果将一个图像放置在另一个图像所在的位置，它们将交换位置 问题 当我开始在“#容器”中移动图像时，出现了一个问题。下次我将图像从“产品”拖动到“容器”时，图像将落入元素的正常流中，而不会意识到元素已被移动。该图像中的结果可能位于另一图像的顶部，从而覆盖该图像 这可能与位置有关：相对移动元素时保持不变 非常感谢你的帮助 我计划将其作为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>
拖放1
$（文档）.ready（函数（）{
// --------------
//-图像交换-
// --------------
//用户可以将图像从“#产品”拖动到“#容器”。它们将进入正常的元素流。
//“容器”内的所有图像都可以在网格中的容器一侧拖动。
//如果将一个图像放到另一个图像所在的位置，它们将交换位置。
//设置全局变量。
var=null；
//从“#产品”容器复制图像。
$（“.product”）.draggable({
助手：“克隆”
});
//使“#container”成为可拖放的，并且只接受带有“.product”类的图像。
$（“#容器”）。可拖放({
//仅接受带有“.product”类的图像。
接受：'.product'，
drop：函数（事件、用户界面）{
//当从“#产品”复制的图像放到“#容器”上时，它将添加到“#容器”。
//之后，我们将类名更改为“item”。
$（this.append（ui.draggable.clone（）.addClass（“item”）.removeClass（“产品”））；
//在“#container”中具有类“item”的图像可拖动。
$（“.item”）.draggable({
//防止拖拉物进入“容器”外部。
包含：'父'，
//确保拖拽只能在网格中的9个位置。
网格：[150150]，
开始：功能（事件、用户界面）{
//拖动图像时，请确保它始终位于顶部。
$（this.css（{'z-index'：'100'）；
//获取开始拖动的位置。
拖动=$（this.position（）；
//若您使用Firebug和Firefox，则可以取消对下一行的计量，以便跟踪“拖动”的变量。
//调试（“拖动：”，拖动）；
},
停止：功能（事件、用户界面）{
//恢复到原始图层位置。
$（this.css（{'z-index'：'10'）；
}
});
//在“#容器”中，我们使所有图像都可拖放。
$（“.item”）。可拖放({
drop：函数（事件、用户界面）{
//如果将克隆从“#产品”拖到“#容器”中的现有图像上，请不要执行以下操作。
如果（拖动！=null）{
//获取将“#container”中的另一个图像放置到的图像位置。
var drop_on=$（this.position（）；
var drop_top=$（this.css（“top”）；
var drop_left=$（this.css（“left”）；
//所有图像都有css属性position:relative。因此需要计算
//相对于图像的当前位置移动图像的位置。
var newTop=draugd.top-（drop_on.top-parseInt（drop_top））；
var newLeft=draugd.left-（drop_on.left-parseInt（drop_left））；
//仅移动图像，因为拖动的图像已放置在正确的位置。
$（this.css（{'top'：newTop，'left'：newLeft}）；
//如果您使用Firebug和Firefox以便跟踪变量，下面的行可以取消计量。
//调试（“newTop:，newTop，“newLeft:，newTop”）；
//调试（“drop\u top:”，drop\u top，“drop\u left:”，drop\u left）；
}
}
});
}
});
});
身体{
}
#容器{
宽度：450px；
高度：450px；
边框：1px实心#000；
}
.项目{
宽度：150px；
高度：150像素；
z指数：10；
光标：移动；
}
#产品{
位置：绝对位置；
宽度：450px；
高度：450px；
顶部：9px；
左：550px；
边框：1px实心#000；
}
.产品{
}
#特斯特雷亚{
位置：绝对位置；
宽度：450px；
高度：450px；
顶部：9px；
左：1100px；
边框：1px实心#000；
}