基于jquery的拖动布局插件


Posted in Javascript onNovember 25, 2011
(function($){ 
$.fn.lsMovePanel=function(){ 
var id=this.attr("id"); 
var X=Y=0; 
var offsetX=offsetY=0;//绝对位置 
var OldIndex=0;///存储原始索引 
var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#FF023C\"></li>"; 
var Move_obj;///当前拖动的对象 
$("#"+id+" li").each(function(i){ 
$(this).attr("open","0"); 
//鼠标点击 
$(this).bind("mousedown",function(){ 
if(event.button==1 || event.button==0){$(this).attr("open","1");} 
if($(this).attr("open")=="1"){ 
$(this).css({ 
cursor:"move", 
opacity:"0.7" 
}); 
X=event.clientX; 
Y=event.clientY; 
offsetX=$(this).offset().left; 
offsetY=$(this).offset().top; 
OldIndex=$(this).index(); 
$(this).css({ 
position:"absolute", 
left:offsetX, 
top:offsetY 
}); 
$("#"+id+" li").each(function(i){ 
if(i==OldIndex){ 
$(this).after(Temp_Li); 
} 
}) 
} 
}); 
//鼠标放开 
$(this).bind("mouseup",function(){ 
if(event.button==1 || event.button==0){$(this).attr("open","0");} 
if($(this).attr("open")=="0"){ 
$("#Temp_Li").before($(this)); 
$(this).animate({ 
left:$("#Temp_Li").offset().left, 
top:$("#Temp_Li").offset().top, 
},300,function(){ 
$("#Temp_Li").remove(); 
$(this).css({ 
cursor:"default", 
opacity:"1", 
position:"static" 
}); 
}); 
$("#"+id+" li").each(function(i){ 
$(this).css({ 
"border-color":"#666666" 
}); 
}); 
} 
}); 
//移动 
$(this).bind("mousemove",function(){ 
if($(this).attr("open")=="1"){ 
var current_X=current_Y=0; 
current_X=offsetX+event.clientX-X; 
current_Y=offsetY+event.clientY-Y; 
$(this).css({ 
position:"absolute", 
left:current_X, 
top:current_Y 
}); 
Move_obj=this; 
$("#"+id+" li").each(function(i){ 
if(i!=OldIndex && $(this).attr("id")!="Temp_Li"){ 
var Deviation=0; 
var Max_X=$(this).offset().left+$(this).width()-Deviation; 
var Min_X=$(this).offset().left+Deviation; 
var Max_Y=$(this).offset().top+$(this).height()-Deviation; 
var Min_Y=$(this).offset().top+Deviation; 
if((event.clientX < Max_X) && (event.clientY+$(Move_obj).height() > Max_Y) && (event.clientY+$(Move_obj).height() > Min_Y) && (event.clientX > Min_X) && (event.clientY < Max_Y) ){ 
$(this).css({ 
"border-color":"#FF7578" 
}); 
//判断覆盖对象索引值在前还是后 
if(OldIndex>$(this).index()){ 
$("#Temp_Li").before($(this)); 
$("#Temp_Li").remove(); 
$(this).before(Temp_Li); 
}else{ 
$("#Temp_Li").after($(this)); 
$("#Temp_Li").remove(); 
$(this).after(Temp_Li); 
} 
}else{ 
$(this).css({ 
"border-color":"#666666" 
}); 
} 
} 
}) 
} 
}); 
}); 
} 
})(jQuery);

调用例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title></title> 
<style> 
#Panel{ 
width:630px; 
height:auto; 
padding:0px; 
} 
#Panel li{ 
float:left; 
list-style:none; 
width:300px; 
height:100px; 
margin:5px; 
background-color:#D9F1FF; 
border:1px dotted #666666; 
text-align:center; position:static; 
} 
*{ 
font-size:12px; 
} 
</style> 
</head> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.4.2.min.js"></script> 
<script src="http://demo.3water.com/jslib/lsMovePanel.js"></script> 
<body> 
<div style="margin-left:100px;"> 
<ul id="Panel"> 
<li style="background-color:#3399FF"></li> 
<li style="background-color:#00CCFF"></li> 
<li style="background-color:#CC9900"></li> 
<li style="background-color:#FF6600"></li> 
<li style="background-color:#FFCC99"></li> 
</ul> 
</div> 
<script> 
$("#Panel").lsMovePanel(); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
JQuery1.6 使用方法三
Nov 23 #Javascript
jQuery1.6 使用方法二
Nov 23 #Javascript
jQuery1.6 使用方法一
Nov 23 #Javascript
JS 表单验证大全
Nov 23 #Javascript
JavaScript中的16进制字符(改进)
Nov 21 #Javascript
You might like
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python 异常处理实例详解
2014/03/12 Python
Python类属性与实例属性用法分析
2015/05/09 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python aiohttp的使用详解
2019/06/20 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python读取与处理netcdf数据方式
2020/02/14 Python
如何在django中运行scrapy框架
2020/04/22 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
土地租赁意向书
2014/07/30 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
拾金不昧感谢信
2015/01/21 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python