基于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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python pycharm的安装及其使用
2019/10/11 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python模块相关知识点小结
2020/03/09 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
python 爬取小说并下载的示例
2020/12/07 Python
大家检讨书5000字
2014/02/03 职场文书
群众路线党课主持词
2014/04/01 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
晚会开场白和结束语
2015/05/29 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Python打包为exe详细教程
2021/05/18 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL