标签：
1 <script type="text/javascript" src="JavaScript/jquery1.7.2.js"></script> 2 <script type="text/javascript" src="JavaScript/Tdrag.js"></script>
<div class="div1"></div>
$(".div1").Tdrag();
<div class="boxList">
<div class="div3"></div>
</div>
$(".div3").Tdrag({
scope:".boxList"
});
<div class="boxList">
<div class="div4"></div>
</div>
$(".div4").Tdrag({
scope:".boxList",
grid:[50,50]
});
<div class="boxList"> <div class="one onlyX"></div> <div class="one onlyY"></div> </div>
$(".onlyX").Tdrag({
scope:".boxList",
axis:"x"
});
$(".onlyY").Tdrag({
scope:".boxList",
axis:"y"
});
<div class="one div5"></div>
$(".div5").Tdrag({
pos:true
});
<div class="boxList">
<div class="one div6">
<div class="title">title</div>
</div>
</div>
$(".div6").Tdrag({
scope:".boxList",
handle:".title"
});
<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>
$(".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)}//移动结束时候的回调函数
});
<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>
$(".div8").Tdrag({
scope:".boxList",
pos:true,
dragChange:true
});
<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>
$(".div9").Tdrag({
scope:".boxList",
pos:true,
dragChange:true,
changeMode:"sort"
});
<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>
$(".div10").Tdrag({
scope:".boxList",
pos:true,
dragChange:true,
changeMode:"sort",
moveClass:"abc"
});
<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>
$(".div11").Tdrag({
scope:".boxList",
pos:true,
dragChange:true,
random:true,
randomInput:".plug_random"
});
$(".fn_random").on("click",function(){
$.randomfn(".div11")
})
<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>
$(".div12").Tdrag({
scope:".boxList",
pos:true,
dragChange:true,
animation_options:{
duration:200,//每次动画的事件
easing:"ease-in"//动画特效 ease-out、ease-in、linear
}
});
<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>
$(".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//禁止拖拽的按钮 };
标签：
原文地址：http://www.cnblogs.com/jiangxiaobo/p/5720321.html
