jquery.drag.js—实现拖拽效果的插件的下载、使用方法及实例【附完整在线实例演示】推荐 亲测 收藏

文章标签:
  • :
  • 07-05 21:31
  • :
  • 301次
  • :
  • 0条
  • 1赞

简介jquery.drag.js拖拽插件的下载,使用方法,使用实例和完整的在线演示。l

jquery.drag.js是一款使用起来非常简单和方便的拖拽插件,本文站长就把这个插件分享给大家:


一.插件下载:

//插件非常小,只有3KB,站长放在百度云盘里,可以直接下载
链接: https://pan.baidu.com/s/1yv1jwIqgJeFBHO7lpJveyA 密码: ctdf


二.插件的使用:

和其它jquery插件一样,直接引入就行:

<script language="javascript" src="/Html/aijquery/inc/jquery.drag.js"></script>
//参数说明:
$(element).myDrag({    
    parent:'parent', //定义拖动不能超出的外框,拖动范围    
    randomPosition:true, //初始化随机位置    
    direction:'all', //方向    
    handler:false, //把手    
    dragStart:function(x,y){}, //拖动开始 x,y为当前坐标    
    dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标    
    dragMove:function(x,y){} //拖动进行中 x,y为当前坐标    
});


三.使用方法及教程实例:所有的实例在文章最后都有在线实例演示!

1.X方向的拖拽:

$("#drag-1").myDrag({direction:'x'});


2.Y方向的拖拽:

$("#drag-1").myDrag({direction:'y'});


3.任意方向的拖拽:

$("#drag-1").myDrag({direction:'all'});


4.指定拖拽的把柄:

$("#drag-4").myDrag({			
    randomPosition:false,			
    direction:'all',			
    handler:'.handler'        
});


5.指定拖拽的容器:

$("#drag-5").myDrag({			
    randomPosition:false,			
    direction:'all',			
    handler:'.handler',          	
    parent:'#father'        
});


6.拖拽事件的回调:

$("#drag-6").myDrag({          	
    randomPosition:false,			
    direction:'all',			
    handler:'.handler',          	
    dragStart:function(x,y){				
        $('#huidiao span').html('').eq(0).html('开始拖动了! — 坐标 x:'+x+' y:'+y);			
    },			
    dragEnd:function(x,y){				
        $('#huidiao span').html('').eq(1).html('停止拖动了! — 坐标 x:'+x+' y:'+y);			
    },			
    dragMove:function(x,y){				
        $('#huidiao span').html('').eq(2).html('拖动中! — 坐标 x:'+x+' y:'+y);			
    }		
});


上面所有的实例,都可以在这里看在线实例演示:

jquery拖拽在线实例演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-20 09:56:58