教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jQuery EasyDrag实现DIV拖动

jQuery EasyDrag实现DIV拖动

发布时间:2015-10-05   编辑:jiaochengji.com
最近在做浮动层的拖动时,意外发现一个jquery的拖动插件EasyDrag,只需简短的一两行代码即可在主流浏览器上面轻松拖动。

最近在做浮动层的拖动时,意外发现了一个jquery的拖动插件EasyDrag,只需简短的一两行代码即可在主流浏览器上面轻松拖动。

1、将id为div1的div实现拖动
 

复制代码 代码如下:
$(document).ready(
 function(){
  $("#div1").easydrag();
 }
);

2、EasyDrag 指定可拖动的区域

复制代码 代码如下:
比如只能通过标题拖动整个div
$(document).ready(
 function(){
  $("#div2").easydrag();
  $("#div2").setHandler('div3');
 }
);

3、一些API:
 

复制代码 代码如下:
拖动完成后执行某些操作:$("#div1").ondrop(function(e, element){ alert(element.innerHTML); });
禁止拖动:$("#div2").dragOff();
开启拖动$("#div2").dragOn();

官网链接:http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/

点这里查看演示。
点这里下载示例代码。

您可能感兴趣的文章:
jQuery EasyDrag实现DIV拖动
jQuery拖拉插件 EasyDrag
基于jquery的一行代码轻松实现拖动效果
EasyDrag jQuery Plugin
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
广泛收集的jQuery拖放插件集合
jQuery的插件列表(2010-1-25更新)
基于jquery的鼠标拖动效果代码
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
jquery div拖拽效果(兼容浏览器)

[关闭]
~ ~