JQ的div拖动交换位置的问题 - jquery吧

level 2

乱搭Miller 楼主

新手勿喷，哈哈。下面一段代码出了很大的bug，我自己解决不了，不知道怎么回事，各位大神谁知道的话就说一说呗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sle_dom;//下面鼠标单击后所选择的div的全局变量
var mov_div_offset;//被换位的div的全局变量
var sle_div_offset;//被拖拽的div的全局变量
$(".wrap div").mousedown(function(e){
$(this).css("cursor","move");
var sle_div = jQuery(this);
sle_dom = sle_div;
var offset = $(this).offset();
sle_div_offset = offset;
var e_x = e.pageX - offset.left;
var e_y = e.pageY - offset.top;
$(document).bind("mousemove",function(ev){
$(sle_div).stop();
var div_x = ev.pageX - e_x;
var div_y = ev.pageY - e_y;
$(sle_div).animate({left:div_x + "px",top:div_y + "px"},1);
$(sle_div).siblings().stop().mouseover(function(){
var mov_div_off = $(this).offset();
mov_div_offset = mov_div_off;
$(sle_dom).css("cursor","default");
$(this).unbind("mousemove");
$(this).animate({left:sle_div_offset.left + "px",top:sle_div_offset.top + "px"},1);
$(sle_div).animate({left:mov_div_off.left + "px",top:mov_div_offset.top + "px"},1);
})
});
});
$(document).mouseup(function(){
$(sle_dom).css("cursor","default");
$(this).unbind("mousemove");
});
});
</script>
<style>
.wrap {
width: 100%;
height: 100%;
}
.div1 {
width: 400px;
height: 400px;
left: 20px;
top: 50px;
background-color: #7CD2F8;
position: absolute;
}
.div1 div {
width: 100%;
}
.div1_1 {
height: 60px;
background-color: coral;
}
.div2 {
width: 400px;
height: 400px;
left: 440px;
top: 50px;
background-color: #7CD2F8;
position: absolute;
}
.div3 {
width: 400px;
height: 400px;
left: 860px;
top: 50px;
background-color: #7CD2F8;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">
<div class="div1_1"></div>
<div class="div1_2"></div>
</div>
<div class="div2"></div>
<div class="div3">
<div class="div3_1"></div>
<div class="div3_2"></div>
</div>
</div>
</body>
</html>

2016年07月02日 03点07分 1