也写Jquery插件,拖动布局
1 (function($){ 2 $.fn.lsMovePanel=function(){ 3 var id=this.attr("id"); 4 var X=Y=0; 5 var offsetX=offsetY=0;//绝对位置 6 var OldIndex=0;///存储原始索引 7 var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#FF023C\"></li>"; 8 var Move_obj;///当前拖动的对象 9 $("#"+id+" li").each(function(i){ 10 $(this).attr("open","0"); 11 //鼠标点击 12 $(this).bind("mousedown",function(){ 13 if(event.button==1 || event.button==0){$(this).attr("open","1");} 14 if($(this).attr("open")=="1"){ 15 $(this).css({ 16 cursor:"move", 17 opacity:"0.7" 18 }); 19 X=event.clientX; 20 Y=event.clientY; 21 offsetX=$(this).offset().left; 22 offsetY=$(this).offset().top; 23 OldIndex=$(this).index(); 24 $(this).css({ 25 position:"absolute", 26 left:offsetX, 27 top:offsetY 28 }); 29 $("#"+id+" li").each(function(i){ 30 if(i==OldIndex){ 31 $(this).after(Temp_Li); 32 } 33 }) 34 } 35 }); 36 //鼠标放开 37 $(this).bind("mouseup",function(){ 38 if(event.button==1 || event.button==0){$(this).attr("open","0");} 39 if($(this).attr("open")=="0"){ 40 $("#Temp_Li").before($(this)); 41 $(this).animate({ 42 left:$("#Temp_Li").offset().left, 43 top:$("#Temp_Li").offset().top, 44 },300,function(){ 45 $("#Temp_Li").remove(); 46 $(this).css({ 47 cursor:"default", 48 opacity:"1", 49 position:"static" 50 }); 51 }); 52 $("#"+id+" li").each(function(i){ 53 $(this).css({ 54 "border-color":"#666666" 55 }); 56 }); 57 } 58 }); 59 //移动 60 $(this).bind("mousemove",function(){ 61 if($(this).attr("open")=="1"){ 62 var current_X=current_Y=0; 63 current_X=offsetX+event.clientX-X; 64 current_Y=offsetY+event.clientY-Y; 65 $(this).css({ 66 position:"absolute", 67 left:current_X, 68 top:current_Y 69 }); 70 Move_obj=this; 71 $("#"+id+" li").each(function(i){ 72 if(i!=OldIndex && $(this).attr("id")!="Temp_Li"){ 73 var Deviation=0; 74 var Max_X=$(this).offset().left+$(this).width()-Deviation; 75 var Min_X=$(this).offset().left+Deviation; 76 var Max_Y=$(this).offset().top+$(this).height()-Deviation; 77 var Min_Y=$(this).offset().top+Deviation; 78 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) ){ 79 $(this).css({ 80 "border-color":"#FF7578" 81 }); 82 //判断覆盖对象索引值在前还是后 83 if(OldIndex>$(this).index()){ 84 $("#Temp_Li").before($(this)); 85 $("#Temp_Li").remove(); 86 $(this).before(Temp_Li); 87 }else{ 88 $("#Temp_Li").after($(this)); 89 $("#Temp_Li").remove(); 90 $(this).after(Temp_Li); 91 } 92 }else{ 93 $(this).css({ 94 "border-color":"#666666" 95 }); 96 97 } 98 99 }100 101 })102 }103 });104 });105 }106 })(jQuery);调用例子:
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 5 <title></title> 6 <style> 7 #Panel{ 8 width:630px; 9 height:auto;10 padding:0px;11 }12 #Panel li{13 float:left;14 list-style:none;15 width:300px; 16 height:100px;17 margin:5px;18 background-color:#D9F1FF;19 border:1px dotted #666666;20 text-align:center; position:static; 21 }22 *{23 font-size:12px;24 }25 </style>26 </head>27 <script src="http://files.cnblogs.com/lsmayday/jquery-1.4.2.min.js"></script>28 <script src="http://files.cnblogs.com/lsmayday/lsMovePanel.js"></script>29 <body>30 <div style="margin-left:100px;">31 32 <ul id="Panel">33 <li style="background-color:#3399FF"></li>34 <li style="background-color:#00CCFF"></li>35 <li style="background-color:#CC9900"></li>36 <li style="background-color:#FF6600"></li>37 <li style="background-color:#FFCC99"></li>38 </ul>39 40 </div>41 42 43 <script>44 $("#Panel").lsMovePanel();45 </script>46 </body>47 </html><!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> <title></title> </head> <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> <script src="http://files.cnblogs.com/lsmayday/jquery-1.4.2.min.js"></script> <script src="http://files.cnblogs.com/lsmayday/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> 点我运行
转载于:https://www.cnblogs.com/lsmayday/archive/2011/11/24/2261158.html
也写Jquery插件,拖动布局相关推荐
- 写jQuery插件该注意的
写好jQuery插件,有一些注意的地方(持续添加). 支持UMD 现在前端开发讲究模块化,所以jQuery插件也最好能够兼顾模块化. 模块化模式大概有几种: AMD.CommonJs.UMD. AMD ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- [转]什么？你还不会写JQuery 插件
本文转自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jque ...
- 自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...
- 我的第一个纯手写jQuery插件
2019独角兽企业重金招聘Python工程师标准>>> select-os-icon.js /*** Created by Administrator on 16-7-8.* @au ...
- jQuery实现拖动布局并将排序结果保存到数据库
https://www.helloweba.com/view-blog-72.html
- JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
最新文章
- [Linux] ubuntu 格式化u盘
- 嵌入式中的 *(volatile unsigned int *)0x500 解释
- Android设置ProgressBar的前景和背景及其在多线程中的刷新
- [android] 百度地图开发 (一).申请AK显示地图及解决显示空白网格问题
- 案例精解企业级网络构建
- 希捷宣布出货双碟装1TB硬盘 单碟500GB上市
- 模块化开发之sea.js实现原理总结
- 数据库建表需要外键约束？
- 深入理解SpringBoot(2)
- 阿里巴巴副总裁陈丽娟：我对阿里云产品生态的思考
- informix 如何下载
- 海康威视监控有线/无线安装调试
- 软件著作权申请流程(2021版)
- 让python飞：形象理解python os模块、内存硬盘、字节字符、文件读写复制
- 如何在数据验证单元格区域禁用粘贴
- 编译原理—x86汇编指令
- 从产品角度，快速接盘新系统的一些经验及方法提炼
- WBSC 世界棒垒球总会·亚洲
- 数字信号处理5——CFAR算法及matlab实现
- WEB前端 ---- 学习第二天(表格、表单、css等)