基于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里的prototype使用示例
Nov 19 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
javascript object array方法使用详解
Dec 03 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
基于Bootstrap表单验证功能
Nov 17 Javascript
微信小程序实现授权登录
May 15 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
工作中常用js功能汇总
Nov 07 Javascript
Vue的过滤器你真了解吗
Feb 24 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
菜鸟修复电子管记
2021/03/02 无线电
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php文件缓存类汇总
2014/11/21 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python 登录网站详解及实例
2017/04/11 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Django组件content-type使用方法详解
2019/07/19 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
应届毕业生求职信范文
2014/07/07 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
党校学习个人总结
2015/02/15 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS