Tdrag
2016-07-30 09:59
344 查看
Tdrag属于拖拽类的一款插件,基于jquery而成,兼容1.4以上版本的jquery,兼容浏览器:chrome、firfox、IE7等以上主流浏览器
插件加载
<script type="text/javascript" src="JavaScript/jquery1.7.2.js"></script> <script type="text/javascript" src="JavaScript/Tdrag.js"></script>
插件调用
html代码:<div class="div1"></div>
js代码:
$(".div1").Tdrag();
父级限制
html代码:<div class="boxList"> <div class="div3"></div> </div>
js代码:
$(".div3").Tdrag({ scope:".boxList" });
拖拽规范网格
html代码:<div class="boxList"> <div class="div4"></div> </div>
js代码:
$(".div4").Tdrag({ scope:".boxList", grid:[50,50] });
X轴拖拽或者Y轴拖拽
html代码:<div class="boxList"> <div class="one onlyX"></div> <div class="one onlyY"></div> </div>
js代码:
$(".onlyX").Tdrag({ scope:".boxList", axis:"x" }); $(".onlyY").Tdrag({ scope:".boxList", axis:"y" });
记住位置
html代码:<div class="one div5"></div>
js代码:
$(".div5").Tdrag({ pos:true });
拖拽块内指定区域
html代码:<div class="boxList"> <div class="one div6"> <div class="title">title</div> </div> </div>
js代码:
$(".div6").Tdrag({ scope:".boxList", handle:".title" });
点住、移动、结束时的回调函数
html代码:<div class="boxList"> <div class="one div7"> </div> <div> start:<p class="start">0</p> move:<p class="move">0</p> end:<p class="end">0</p> </div> </div>
js代码:
$(".div7").Tdrag({ scope:".boxList", cbStart:function(){$(".start").html(Number($(".start").html())+1)},//移动前的回调函数 cbMove:function(){$(".move").html(Number($(".move").html())+1)},//移动中的回调函数 cbEnd:function(){$(".end").html(Number($(".end").html())+1)}//移动结束时候的回调函数 });
多个块换位拖拽
html代码:<div class="boxList"> <div class="one div8"><div class="title">1</div></div> <div class="one div8"><div class="title">2</div></div> <div class="one div8"><div class="title">3</div></div> <div class="one div8"><div class="title">4</div></div> <div class="one div8"><div class="title">5</div></div> <div class="one div8"><div class="title">6</div></div> <div class="one div8"><div class="title">7</div></div> <div class="one div8"><div class="title">8</div></div> <div class="one div8"><div class="title">9</div></div> <div class="one div8"><div class="title">10</div></div> </div>
js代码:
$(".div8").Tdrag({ scope:".boxList", pos:true, dragChange:true });
排序换位拖拽
html代码:<div class="boxList"> <div class="one div9"><div class="title">1</div></div> <div class="one div9"><div class="title">2</div></div> <div class="one div9"><div class="title">3</div></div> <div class="one div9"><div class="title">4</div></div> <div class="one div9"><div class="title">5</div></div> <div class="one div9"><div class="title">6</div></div> <div class="one div9"><div class="title">7</div></div> <div class="one div9"><div class="title">8</div></div> <div class="one div9"><div class="title">9</div></div> <div class="one div9"><div class="title">10</div></div> </div>
js代码:
$(".div9").Tdrag({ scope:".boxList", pos:true, dragChange:true, changeMode:"sort" });
排序换位拖拽
在移动过程中每两个块相触碰时所添加的classhtml代码:
<div class="boxList"> <div class="one div10"><div class="title">1</div></div> <div class="one div10"><div class="title">2</div></div> <div class="one div10"><div class="title">3</div></div> <div class="one div10"><div class="title">4</div></div> <div class="one div10"><div class="title">5</div></div> </div>
js代码:
$(".div10").Tdrag({ scope:".boxList", pos:true, dragChange:true, changeMode:"sort", moveClass:"abc" });
随机变化位置
random属性属于加载时自动随机,randomInput属于给按钮加上事件,而我们也为随机数增加一种randomfn()方法,方便调用。html代码:
<input class="plug_random" type="button" value="通过插件随机"> <input class="fn_random" type="button" value="通过函数随机"> <div class="boxList"> <div class="one div11"><div class="title">1</div></div> <div class="one div11"><div class="title">2</div></div> <div class="one div11"><div class="title">3</div></div> <div class="one div11"><div class="title">4</div></div> <div class="one div11"><div class="title">5</div></div> <div class="one div11"><div class="title">6</div></div> <div class="one div11"><div class="title">7</div></div> <div class="one div11"><div class="title">8</div></div> <div class="one div11"><div class="title">9</div></div> <div class="one div11"><div class="title">10</div></div> <div class="one div11"><div class="title">11</div></div> <div class="one div11"><div class="title">12</div></div> <div class="one div11"><div class="title">13</div></div> <div class="one div11"><div class="title">14</div></div> <div class="one div11"><div class="title">15</div></div> </div>
js代码:
$(".div11").Tdrag({ scope:".boxList", pos:true, dragChange:true, random:true, randomInput:".plug_random" }); $(".fn_random").on("click",function(){ $.randomfn(".div11") })
变化位置时动画参数
duration是每次运动的总用时,easing是运动的方法:ease-out、ease-in、linearhtml代码:
<div class="boxList"> <div class="one div12"><div class="title">1</div></div> <div class="one div12"><div class="title">2</div></div> <div class="one div12"><div class="title">3</div></div> <div class="one div12"><div class="title">4</div></div> <div class="one div12"><div class="title">5</div></div> <div class="one div12"><div class="title">6</div></div> <div class="one div12"><div class="title">7</div></div> <div class="one div12"><div class="title">8</div></div> <div class="one div12"><div class="title">9</div></div> <div class="one div12"><div class="title">10</div></div> </div>
js代码:
$(".div12").Tdrag({ scope:".boxList", pos:true, dragChange:true, animation_options:{ duration:200,//每次动画的事件 easing:"ease-in"//动画特效 ease-out、ease-in、linear } });
禁止拖拽
disable属性属于加载时自动禁止拖拽,randomInput属于给按钮加上事件,点击时如果是禁止的,就是开启。反而如果时开启的,点击就是禁止而我们也为随机数增加两种disable方法,一个只能开启拖拽:disable_open(),一个只能禁止拖拽:disable_cloose(),方便调用。html代码:
<input type="button" class="disable" value="插件按钮"> <input type="button" class="disable_open" value="函数开启拖拽"> <input type="button" class="disable_cloose" value="函数禁止拖拽"> <div class="boxList"> <div class="one div13"></div> </div>
js代码:
$(".div13").Tdrag({ scope:".boxList", disable:true, disableInput:".disable" }); //禁止 $(".disable_cloose").on("click",function(){ $.disable_cloose() }); //开启 $(".disable_open").on("click",function(){ $.disable_open() });
另附一份插件参数初始值
var call = { scope: null,//父级 grid: null,//网格 axis:"all",//上下或者左右 pos:false,//是否记住位置 handle:null,//手柄 moveClass:"tezml",//移动时不换位加的class dragChange:false,//是否开启拖拽换位 changeMode:"point",//point & sort cbStart:function(){},//移动前的回调函数 cbMove:function(){},//移动中的回调函数 cbEnd:function(){},//移动结束时候的回调函数 random:false,//是否自动随机排序 randomInput:null,//点击随机排序的按钮 animation_options:{//运动时的参数 duration:800,//每次运动的时间 easing:"ease-out"//移动时的特效,ease-out、ease-in、linear }, disable:false,//禁止拖拽 disableInput:null//禁止拖拽的按钮 };
相关文章推荐
- 使用纯CSS3创建一个纺锤形分隔线
- JAVA:自定义注解
- hdu 1853 Cyclic Tour(费用流,判断满流)
- GZIP压缩原理分析(01)——第一章 序言
- Print all Jumping Numbers smaller than or equal to a given value
- 精选30道Java笔试题(原网站:http://www.cnblogs.com/lanxuezaipiao/p/3371224.html)
- GIS基础软件及操作(九)
- GIS基础软件及操作(八)
- 剑指offer——链表中倒数第k个结点
- ==equals的区别
- 常用数据库高可用和分区解决方案(1) — MySQL篇
- Uva156 map容器的使用 sortvecor And map.count
- 浏览器指纹的消除
- android--进度框(ProgressBar)
- [2016-7-29]每日总结
- 编写OC代码时的注意事项
- CodeForces 702 A Maximum Increase (贪心,高效算法)
- GIS基础软件及操作(七)
- Visual Studio Code 怎么支持中文
- UVA 536 - Tree Recovery