jq实现的拖动排序

首先我们要实现一个拖动的js这里我们就不废话了直接上拖动js的源码 $.fn.dropIng=function (type,Obj) { this.each(function (a, b){ b.typeDrop=0; if(typeof type!="undefined"){ b.typeDrop=type; } typeof Obj.position=="undefined"?Obj.position="fixed":Obj.position; typeof Obj.stopPro=="undefined"?Obj.stopPro=false:Obj.stopPro; (typeof Obj.returnValue=="undefined")?Obj.returnValue=true:true; (typeof Obj.doc=="undefined")?Obj.doc=document:true; var zIndex=typeof Obj.zIndex=="undefined"?true:false; if(typeof Obj.startPoint!="undefined"){ b.startPoint=Obj.startPoint; } b.endlDrop=function(){ b.typeDrop=0; $(b).attr("style",""); }; var func=function(e){ e.preventDefault(); if(b.typeDrop==1){ $(b).css({ left:b.startPoint.Px+ (e.clientX-b.startPoint.x)+"px", top:b.startPoint.Py+ (e.clientY-b.startPoint.y)+"px" }); if(zIndex){ $(b).css({ zIndex:10000 }) } if(typeof Obj.mode!="undefined"&&Obj.mode=="process"){ if(typeof Obj.processMoveFun!="undefined"){ Obj.processMoveFun(b,b.startPoint.Px+ (e.clientX-b.startPoint.x),b.startPoint.Py+ (e.clientY-b.startPoint.y),e); }else if(typeof DropMoveFun!="undefined"){ DropMoveFun(b,b.startPoint.Px+ (e.clientX-b.startPoint.x),b.startPoint.Py+ (e.clientY-b.startPoint.y),e); } }else{ if(typeof b.moveFun!="undefined"){ b.moveFun(b,b.startPoint.Px+ (e.clientX-b.startPoint.x),b.startPoint.Py+ (e.clientY-b.startPoint.y),e); } } } }; b.deleteDrop=function(){ $(b).off("mousedown"); $(b).off("mouseup"); $(Obj.doc).off("mousemove",func); }; //添加鼠标按下事件 $(b).on("mousedown",function(e){ if(Obj.stopPro){ e.stopPropagation(); } if(Obj.returnValue==true){ if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue=false; } } var x=0; var y=0; if(Obj.position=="fixed"){ x=$(b).offset().left-(window.scrollX?window.scrollX:window.pageXOffset); y=$(b).offset().top-(window.scrollY?window.scrollY:window.pageYOffset); }else if(Obj.position=="absolute"){ x= b.offsetLeft; y= b.offsetTop; } if(b.typeDrop==0){ b.typeDrop=1; b.startPoint={ x: e.clientX, y: e.clientY, Px:x, Py:y }; $(b).css({ position:Obj.position, cursor:"pointer", left:parseInt(b.startPoint.Px)+"px", top:parseInt(b.startPoint.Py)+"px", margin:0 }); if(zIndex){ $(b).css({ zIndex:10000 }) } if(typeof Obj.mode!="undefined"&&Obj.mode=="process"){ if(typeof Obj.processStartFun!="undefined"){ Obj.processStartFun(b, $(b).position().left,$(b).position().top,e); }else if(typeof DropStartFun!="undefined"){ DropStartFun(b, $(b).position().left,$(b).position().top,e); } }else{ if(typeof b.startFun!="undefined"){ b.startFun(b, $(b).position().left,$(b).position().top,e); } } } }); //添加鼠标移动事件 $(Obj.doc).on("mousemove",func); //添加鼠标放开事件 $(b).on("mouseup",function(e){ e.preventDefault(); if(b.typeDrop==1){ b.typeDrop=0; if(typeof Obj.mode!="undefined"&&Obj.mode=="process"){ if(typeof Obj.processEndFun!="undefined"){ Obj.processEndFun(b, $(b).position().left,$(b).position().top,e); }else if(typeof DropEndFun!="undefined"){ DropEndFun(b, $(b).position().left,$(b).position().top,e); } }else{ if(typeof b.endFun!="undefined"){ b.endFun(b, $(b).position().left, $(b).position().top,e); } } } }); }); };

可以直接复制下来使用

拖动js的参数说明 type 0 并没有拖动 1拖动中 2拖动结束 Obj mode process如果为该值将会 调用Obj.processStartFun 否则调用this.startFun 调用Obj.processMoveFun 否则调用this.moveFun 调用Obj.processEndFun 否则调用this.endFun processStartFun,processMoveFun,processEndFun 参数一是this 参数二是x，参数三是y参数四是event对象 position 定位方式(fixed absolute) stopPro returnValue 是否阻止默认行为默认为true doc 指定 的文档的对象 为传入的节点新增自定义属性 .typeDrop 拖动过程 .startPoint 开始点的信息

调用实例:

$(".tableCard").dropIng( 0,{} );

将拖动js命名为drop.js

接下来我们完成一个拖动排序的js好了废话不多说直接上源码

;(function(f){ var inRect=function(point,Obj){ if(point.x>=Obj.x&&Obj.x+Obj.w>=point.x&&point.y>=Obj.y&&Obj.y+Obj.h>=point.y)return true; return false }; function a(){ var obj = new Object(); var structObj = { processStartFun:function(ele,x,y,event){ if(!ele.clone){ ele.clone=$("<div></div>"); ele.clone.addClass(obj.option.showClass) } obj.allChild=$("."+obj.option.arrClass); ele.beforeEle=0; ele.afterEle=null; if(obj.option.isShowCss){ ele.clone.css({ height:$(ele).outerHeight()+"px", width:$(ele).outerWidth()+"px", border:"1px solid #e6eaee", backgroundColor:"#cccccc" }); }else{ ele.clone.attr("style",""); } ele.index=obj.allChild.index(ele); obj.option.callBackStart.call(obj,{info:"dropStart",ele:ele,x:x,y:y,event:event}); }, processMoveFun:function(ele,x,y,event){ if(!ele.clone){ ele.clone=$("<div></div>"); ele.clone.addClass(obj.option.showClass) } var first = null; var all = obj.allChild; all.each(function(){ if(first==null&&this!=ele){ first=$(this); } if(this==ele){return} var p1={ x:x, y:y }; var rect={ x:$(this).offset().left, y:$(this).offset().top, w:$(this).outerWidth(), h:$(this).outerHeight() }; if(inRect(p1,rect)){ $(this).after(ele.clone); ele.afterEle=this; } if(p1.x<first.offset().left+first.outerWidth()&&p1.x>first.offset().left&&p1.y<first.offset().top){ first.before(ele.clone); ele.afterEle=first; ele.beforeEle=1; } }); obj.option.callBackMove.call(obj,{info:"dropIng",ele:ele,x:x,y:y,event:event}); }, mode:"process", processEndFun:function(ele,x,y,event){ if( ele.afterEle==null){ ele.style=""; ele.clone.remove(); obj.option.callBackEnd.call(obj,{info:"noChange",ele:ele,x:x,y:y,event:event}); return; } if(ele.beforeEle==1){ $(ele.afterEle).before(ele); }else{ $(ele.afterEle).after(ele); } ele.style=""; $(ele).attr("style",""); ele.clone.remove(); var index=$("."+obj.option.arrClass).index(ele); if(index==ele.index){ obj.option.callBackEnd.call(obj,{info:"noChange",ele:ele,x:x,y:y,event:event}); }else{ obj.option.callBackEnd.call(obj,{info:"change",ele:ele,x:x,y:y,event:event}); } } }; obj.setOption=function(Obj){ var defaultObj = { maxBox:null,//最大容器 arrClass:"info",//要拖动的节点的class showClass:"",//生成的节点的class callBackEnd:function(){},//回调 callBackStart:function(){}, callBackMove:function(){}, isShowCss:true //是否给生成的节点增加样式 }; $.extend(defaultObj,Obj); obj.option = defaultObj; }; obj.mouseDown=function(e){ if(typeof this.typeDrop=="undefined"){ structObj.processStartFun(this,0,0,e); $(this).dropIng( 1,structObj ); var x= 0; var y= 0; x=$(this).offset().left-(window.scrollX?window.scrollX:window.pageXOffset); y=$(this).offset().top-(window.scrollY?window.scrollY:window.pageYOffset); this.startPoint={ x: e.clientX, y: e.clientY, Px:x, Py:y }; $(this).css({ position:"fixed", cursor:"pointer", left:parseInt(this.startPoint.Px)+"px", top:parseInt(this.startPoint.Py)+"px", margin:0 }); } }; obj.init = function(){ var maxBox = $(obj.option.maxBox); maxBox.on("mousedown","."+obj.option.arrClass,obj.mouseDown); }; obj.remove=function(){ var maxBox = $(obj.option.maxBox); maxBox.off("mousedown",obj.mouseDown); }; return obj; } f(a); })(function(f){ $.fn.dropProtoTitle=function(Obj){ if(!$(document).dropIng){ console.log("error:dropIng is not defined"); return {}; } var obj = f(); Obj=Obj||{}; if(!Obj.maxBox){ Obj.maxBox = this; } obj.setOption(Obj); obj.init(); return obj; } });

将拖动排序js命名为dropProtoTitle.js

好了接下来是html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .info{ width: 100%; } </style> </head> <body> <div class="tableCard" style="width: 100px;height: 100px;background-color: #ccc"> </div> <div id="a1"> <div class="info">1</div> <div class="info">2</div> <div class="info">3</div> <div class="info">4</div> <div class="info">5</div> <div class="info">6</div> </div> </body> <script src="jquery-1.11.0.js" type="text/javascript"></script> <script src="drop.js" type="text/javascript"></script> <script src="dropProtoTitle.js"></script> <script type="text/javascript"> $(".tableCard").dropIng( 0,{} ); var asd=$("#a1").dropProtoTitle({ showClass:"hello", callBackEnd:function(o){ console.log(o); } }) </script> </html>

调用拖动排序js的参数说明

maxBox:null,//最大容器arrClass:"info",//要拖动的节点的classshowClass:"",//生成的节点的classcallBackEnd:function(){},//回调callBackStart:function(){},callBackMove:function(){},isShowCss:true //是否给生成的节点增加样式

maxBox是需要排序节点数组的父节点

$(".tableCard").dropIng( 0,{} );这里演示了拖动 var asd=$("#a1").dropProtoTitle({ showClass:"hello", callBackEnd:function(o){ console.log(o); } })

这里演示了拖动排序