1.该写法是面向对象
1.定义鼠标位置；
2.遍历需要换位的元素，
01.添加初始化方法，从父元素中取出，设置position：absolute；
Left top值为父元素的值
02.添加move方法-->鼠表松开时回到原位->传入回调函数
02.添加拖拽方法-->鼠标松开时调用move方法，回归原位置
03.添加碰撞检测方法，根据不同情况direction 返回不同方向值；
04.交换位置的方法：传入当前拖拽元素 和 方向值作为参数-->this的指向
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script src="jquery.min.js"></script><title>拖拽换位</title><style>.item_content ul {list-style:none;}.item_content ul li {width:200px;height:120px;float:left;margin:10px}.item_content {width:740px;height:460px;border:1px solid #ccc;float:left;}.item_content .item {width:200px;height:120px;line-height:120px;text-align:center;cursor:pointer;background:#ccc;}.item_content .item img {width:200px;height:120px;border-radius:6px;}</style></head><body><div class="item_container"><div class="item_content"><ul><li class="n1"><div class="item"><img src="images/youku.png" /></div></li><li><div class="item"><img src="images/jd.png" /></div></li><li><div class="item"><img src="images/taobao.png" /></div></li><li><div class="item"><img src="images/fenghuan.png" /></div></li><li><div class="item"><img src="images/souhu.png" /></div></li><li><div class="item"><img src="images/wangyi.png" /></div></li><li><div class="item"><img src="images/renren.png" /></div></li><li><div class="item"><img src="images/360.png" /></div></li><li><div class="item"><img src="images/360game.png" /></div></li></ul></div></div><script>$(function(){function Pointer(x,y){//定义鼠标位置；this.x = x;this.y = y;//console.log(this);//-->Pointer }function Position(left,top){//定义拖拽位置；this.left = left;this.top = top;// console.log(this);//-->Position }$('.item_content .item').each(function(i){this.init = function(){this.box = $(this).parent();$(this).attr('index',i).css({position:'absolute',top:this.box.offset().top,left:this.box.offset().left}).appendTo('.item_content')this.drag()}this.move = function(callback){$(this).animate({left:this.box.offset().left,top:this.box.offset().top},500,function(){if(callback){callback.call(this)//如果存在回调函数，则调用move方法 }})}this.collisionCheck = function(){var currentItem = this;var direction = null;//用来存方向值$(this).siblings('.item').each(function(){if(currentItem.pointer.x>this.box.offset().left&¤tItem.pointer.y>this.box.offset().top&&(currentItem.pointer.x<this.box.offset().left+this.box.width() )&&(currentItem.pointer.y<this.box.offset().top+this.box.height())){if(currentItem.box.offset().top<this.box.offset().top){direction = 'down';console.log(direction)}else if(currentItem.box.offset().top>this.box.offset().top){direction = 'up';console.log(direction)}else{direction = 'normal';console.log(direction)}this.swap(currentItem,direction);}})}this.swap = function(currentItem,direction){//传入拖拽div和方向值 做变换var directions = {normal :function(){var saveBox = this.box;//接收框 = 当前框-->this-->碰撞到的兄弟divthis.box = currentItem.box;//定义中间变量，交换divcurrentItem.box = saveBox;this.move();$(this).attr('index',this.box.index());$(currentItem).attr('index',currentItem.box.index())}}directions[direction].call(this);//调用当前对象对应的方法 }this.drag = function(){var oldPosition = new Position();var oldPointer = new Pointer();var isDrag = false;var currentItem = null;$(this).mousedown(function(e){e.preventDefault();oldPosition.left = $(this).position().left;oldPosition.top = $(this).position().top;oldPointer.x = e.clientX;oldPointer.y = e.clientY;isDrag = true;currentItem = this;})$(document).mousemove(function(e){var currentPointer = new Pointer(e.clientX, e.clientY);if(!isDrag) return false;$(currentItem).css({'opacity':'0.8','z-index':'999'})var left = currentPointer.x - oldPointer.x + oldPosition.left;var top = currentPointer.y - oldPointer.y + oldPosition.top;$(currentItem).css({left:left,top:top})currentItem.pointer = currentPointer ;//定义鼠标位置//碰撞检测currentItem.collisionCheck();//调用碰撞检测方法 })$(document).mouseup(function(){if(!isDrag) return false;isDrag = false;currentItem.move(function(){//这是传入的回调函数$(this).css({'opacity':'1','z-index':0})})})}this.init();})})</script></body> </html>
