<ul id="list1">
<li>
<div drag="normal">
1</div>
</li>
<li>
<div drag="normal">
2</div>
</li>
<li>
<div drag="normal">
3</div>
</li>
<li>
<div drag="normal">
4</div>
</li>
<li>
<div drag="normal">
5</div>
</li>
<li>
<div drag="normal">
6</div>
</li>
<li>
<div drag="normal">
7</div>
</li>
<li>
<div drag="normal">
8</div>
</li>
<li>
<div drag="normal">
9</div>
</li>
</ul>
<style type="text/css">
body
{
padding-top: 20px;
}
ul
{
margin: 0px;
padding: 0px;
margin-left: 20px;
}
#list1
{
width: 350px;
list-style-type: none;
margin: 0px;
}
#list1 li
{
float: left;
padding: 5px;
width: 90px;
height: 90px;
}
#list1 div
{
width: 90px;
height: 90px;
border: solid 1px black;
background-color: #E0E0E0;
text-align: center;
z-index: 1;
}
#list1 li .temp
{
width: 90px;
height: 90px;
border: dashed 1px black;
background-color: #E0E0E0;
text-align: center; /*z-index: 0;*/
}
div.moving
{
position: absolute;
cursor: move;
z-index: 2;
opacity: 0.7; /***在Firefox, Safari, Chrome和Opera下的CSS透明度***/
filter: alpha(opacity=70); /***IE***/
}
</style>
<script type="text/javascript">
$(function () {
$("div[drag='normal']").mousedown(function (e) {
var ev = window.event || e;
var originX = $(this).offset().left;
var oringnY = $(this).offset().top;
var relativeX = ev.clientX - originX;
var relativeY = ev.clientY - oringnY;
var $currentDiv = $(this); //当前待移动的div
var $currentLi = $currentDiv.parent(); //存放当前待移动div的容器li
var $tempDiv = $("<div></div>").addClass("temp").hide();
$tempDiv.appendTo("body");
var $targetLi = null;
$currentDiv.removeAttr("drag");
$(document).mousemove(function (e) {
var ev = window.event || e;
var currentX = ev.clientX - relativeX;
var currentY = ev.clientY - relativeY;
$tempDiv.show().appendTo($currentLi); //添加占位符div
$currentDiv.addClass("moving").css({ "left": currentX, "top": currentY });
//移动过程中的临时交换
var centerX = currentX + $currentDiv.width() / 2;
var centerY = currentY + $currentDiv.height() / 2; //移动过程中div中点的坐标
$("div[drag='normal']").each(function (index, item) {
var left1 = $(item).offset().left;
var left2 = left1 + $(item).width();
var top1 = $(item).offset().top;
var top2 = top1 + $(item).height(); //每个div四条边线的坐标值
if (centerX > left1 && centerX < left2 && centerY > top1 && centerY < top2) {
$targetLi = $(item).parent(); //目标容器li
$currentLi.children(".temp").remove().appendTo($targetLi);
$(item).appendTo($currentLi);
$currentLi = $targetLi;
isSorted = true;
}
})
//防止拖动中选中
if (document.selection) {//IE ,Opera
if (document.selection.empty)
document.selection.empty(); //IE
else //Opera
document.selection = null;
}
else if (window.getSelection)//FF,Safari
{
window.getSelection().removeAllRanges();
}
});
$(document).mouseup(function (e) {
$(document).unbind("mousemove");
var x = $tempDiv.offset().left;
var y = $tempDiv.offset().top;
$currentDiv.attr("drag", "normal").animate({ left: x, top: y }, 200,
function () {
$tempDiv.remove();
$currentDiv.removeAttr("style").removeClass("moving").appendTo($targetLi == null ? $currentLi : $targetLi);
})
$(document).unbind("mouseup");
})
})
})
</script>