Tdrag

Tdrag属于拖拽类的一款插件，基于jquery而成，兼容1.4以上版本的jquery，兼容浏览器：chrome、firfox、IE7等以上主流浏览器

插件加载

1
2
<script type="text/javascript" src="JavaScript/jquery1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/Tdrag.js"></script>

插件调用

html代码:
1
<div class="div1"></div>
js代码:
1
$(".div1").Tdrag();

父级限制

html代码:
1
2
3
<div class="boxList">
     <div class="div3"></div>
</div>
js代码:
1
2
3
$(".div3").Tdrag({
     scope:".boxList"
});

拖拽规范网格

html代码:
1
2
3
<div class="boxList">
     <div class="div4"></div>
</div>
js代码:
1
2
3
4
5
$(".div4").Tdrag({
   scope:".boxList",
   grid:[50,50]
});
    

X轴拖拽或者Y轴拖拽

html代码:
1
2
3
4
<div class="boxList">
   <div class="one onlyX"></div>
   <div class="one onlyY"></div>
</div>
js代码:
1
2
3
4
5
6
7
8
$(".onlyX").Tdrag({
    scope:".boxList",
    axis:"x"
});
$(".onlyY").Tdrag({
    scope:".boxList",
    axis:"y"
});

记住位置

html代码:
1
 <div class="one div5"></div>
js代码:
1
2
3
$(".div5").Tdrag({
    pos:true
});

拖拽块内指定区域

html代码:
1
2
3
4
5
<div class="boxList">
    <div class="one div6">
        <div class="title">title</div>
    </div>
</div>
js代码:
1
2
3
4
$(".div6").Tdrag({
    scope:".boxList",
    handle:".title"
});
title

点住、移动、结束时的回调函数

html代码:
1
2
3
4
5
6
7
8
9
<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代码:
1
2
3
4
5
6
$(".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)}//移动结束时候的回调函数
});
start:

0

move:

0

end:

0

多个块换位拖拽

html代码:
1
2
3
4
5
6
7
8
9
10
11
12
<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代码:
1
2
3
4
5
$(".div8").Tdrag({
    scope:".boxList",
    pos:true,
    dragChange:true
});
1
2
3
4
5
6
7
8
9

排序换位拖拽

html代码:
1
2
3
4
5
6
7
8
9
10
11
12
<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代码:
1
2
3
4
5
6
$(".div9").Tdrag({
    scope:".boxList",
    pos:true,
    dragChange:true,
    changeMode:"sort"
});
1
2
3
4
5
6
7
8
9

排序换位拖拽

在移动过程中每两个块相触碰时所添加的class
html代码:
1
2
3
4
5
6
7
<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代码:
1
2
3
4
5
6
7
$(".div10").Tdrag({
    scope:".boxList",
    pos:true,
    dragChange:true,
    changeMode:"sort",
    moveClass:"abc"
});
1
2
3
4
5

随机变化位置

random属性属于加载时自动随机，randomInput属于给按钮加上事件，而我们也为随机数增加一种randomfn()方法，方便调用。
html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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代码:
1
2
3
4
5
6
7
8
9
10
$(".div11").Tdrag({
    scope:".boxList",
    pos:true,
    dragChange:true,
    random:true,
    randomInput:".plug_random"
});
$(".fn_random").on("click",function(){
    $.randomfn(".div11")
})
1
2
3
4
5
6
7
8
9
10
11
12

变化位置时动画参数

duration是每次运动的总用时，easing是运动的方法：ease-out、ease-in、linear
html代码:
1
2
3
4
5
6
7
8
9
10
11
12
<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代码:
1
2
3
4
5
6
7
8
9
$(".div12").Tdrag({
    scope:".boxList",
    pos:true,
    dragChange:true,
    animation_options:{
        duration:200,//每次动画的事件
        easing:"ease-in"//动画特效 ease-out、ease-in、linear
    }
});
1
2
3
4
5
6
7
8
9

禁止拖拽

disable属性属于加载时自动禁止拖拽，randomInput属于给按钮加上事件，点击时如果是禁止的，就是开启。反而如果时开启的，点击就是禁止而我们也为随机数增加两种disable方法，一个只能开启拖拽：disable_open()，一个只能禁止拖拽：disable_cloose(),方便调用。
html代码:
1
2
3
4
5
6
<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代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
$(".div13").Tdrag({
    scope:".boxList",
    disable:true,
    disableInput:".disable"
});
//禁止
$(".disable_cloose").on("click",function(){
    $.disable_cloose()
});
//开启
$(".disable_open").on("click",function(){
    $.disable_open()
});

另附一份插件参数初始值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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//禁止拖拽的按钮
};