拖拽排序 原理+代码
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&& currentItem.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-->碰撞到的兄弟div this.box = currentItem.box;//定义中间变量，交换div currentItem.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>
