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

插件加载

1 2 

插件调用

html代码:

js代码:

$(".div1").Tdrag();

父级限制

html代码:

js代码:

$(".div3").Tdrag({     scope:".boxList"});

拖拽规范网格

html代码:

js代码:

$(".div4").Tdrag({   scope:".boxList",   grid:[50,50]});

X轴拖拽或者Y轴拖拽

html代码:

js代码:

$(".onlyX").Tdrag({    scope:".boxList",    axis:"x"});$(".onlyY").Tdrag({    scope:".boxList",    axis:"y"});

记住位置

html代码:

js代码:

$(".div5").Tdrag({    pos:true});

拖拽块内指定区域

html代码:

     
    
      
        
       
        title
       
    
      
     

js代码:

$(".div6").Tdrag({    scope:".boxList",    handle:".title"});

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

html代码:

     
    
      
    
      
    
      
               start:
       
0
        move:
       
0
        end:
       
0
    
      
     

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代码:

     
    
      
       
        1
       
      
    
      
       
        2
       
      
    
      
       
        3
       
      
    
      
       
        4
       
      
    
      
       
        5
       
      
    
      
       
        6
       
      
    
      
       
        7
       
      
    
      
       
        8
       
      
    
      
       
        9
       
      
    
      
       
        10
       
      
     

js代码:

$(".div8").Tdrag({    scope:".boxList",    pos:true,    dragChange:true});

排序换位拖拽

html代码:

     
    
      
       
        1
       
      
    
      
       
        2
       
      
    
      
       
        3
       
      
    
      
       
        4
       
      
    
      
       
        5
       
      
    
      
       
        6
       
      
    
      
       
        7
       
      
    
      
       
        8
       
      
    
      
       
        9
       
      
    
      
       
        10
       
      
     

js代码:

$(".div9").Tdrag({    scope:".boxList",    pos:true,    dragChange:true,    changeMode:"sort"});

排序换位拖拽

在移动过程中每两个块相触碰时所添加的class

html代码:

     
    
      
       
        1
       
      
    
      
       
        2
       
      
    
      
       
        3
       
      
    
      
       
        4
       
      
    
      
       
        5
       
      
     

js代码:

$(".div10").Tdrag({    scope:".boxList",    pos:true,    dragChange:true,    changeMode:"sort",    moveClass:"abc"});

随机变化位置

random属性属于加载时自动随机，randomInput属于给按钮加上事件，而我们也为随机数增加一种randomfn()方法，方便调用。

html代码:

     
    
      
       
        1
       
      
    
      
       
        2
       
      
    
      
       
        3
       
      
    
      
       
        4
       
      
    
      
       
        5
       
      
    
      
       
        6
       
      
    
      
       
        7
       
      
    
      
       
        8
       
      
    
      
       
        9
       
      
    
      
       
        10
       
      
    
      
       
        11
       
      
    
      
       
        12
       
      
    
      
       
        13
       
      
    
      
       
        14
       
      
    
      
       
        15
       
      
     

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、linear

html代码:

     
    
      
       
        1
       
      
    
      
       
        2
       
      
    
      
       
        3
       
      
    
      
       
        4
       
      
    
      
       
        5
       
      
    
      
       
        6
       
      
    
      
       
        7
       
      
    
      
       
        8
       
      
    
      
       
        9
       
      
    
      
       
        10
       
      
     

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代码:

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//禁止拖拽的按钮};