首先我们要实现一个拖动的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",//要拖动的节点的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);
}
})
这里演示了拖动排序