基于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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue实现滑动解锁功能
Mar 03 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日历[测试通过]
2008/03/27 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php浏览历史记录的方法
2015/03/10 PHP
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python中的下划线详解
2015/06/24 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python3.6的venv模块使用详解
2018/08/01 Python
Django实现基于类的分页功能
2019/10/31 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
少年闰土教学反思
2014/02/22 职场文书
房产委托公证书样本
2014/04/04 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python