jq實現的拖動排序
阿新 • • 發佈：2018-11-01
首先我們要實現一個拖動的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物件呼叫例項:
$(".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",//要拖動的節點的class
showClass:"",//生成的節點的class
callBackEnd:function(){},//回撥
callBackStart:function(){},
callBackMove:function(){},
isShowCss:true //是否給生成的節點增加樣式
maxBox是需要排序節點陣列的父節點
$(".tableCard").dropIng(
0,{}
); var asd=$("#a1").dropProtoTitle({
showClass:"hello",
callBackEnd:function(o){
console.log(o);
}
})這裡演示了拖動排序