基于jquery的一行代码轻松实现拖动效果

实现拖动效果.


代码如下:

$(document).ready( function()
{
$("#divPanel").easydrag();
}
);

Html 代码


代码如下:

<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
<div id="divTitle" style="width:100%;height:25px;background:lavender">
Title
</div>
<div style="width:100%">
</div>
</div>

EasyDrag还可以指定可拖动的区域，比如只能通过标题拖动整个div，我们JS可以这样写


代码如下:

$(document).ready ( function()
{
$("#divPanel").easydrag();

$("#divPanel").setHandler("divTitle");
}
);

一个setHandler搞定,不错开源是个好东西，Jquery更是好东西，插件扩展机制不是一般的好。
Drag.rar打包

赞 (0)

相关推荐

  • Jquery写一个鼠标拖动效果实现原理与代码

    近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 我的思路是这样的: 1.在鼠标按下的时候,捕获鼠标的当前位置: 2.得到要移动对象的当前位置信息: 3.鼠标移动时,计算鼠标移动的距离,将这个距离更新到对象的位置,在我的代码中,我试用绝对定位来表示对象的位置: 4.当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态.这个在我的代码中

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    相对于上一篇,优化了拖拽的效果. js代码:fun.js 复制代码 代码如下: _MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if

  • jquery实现div拖拽宽度示例代码

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码.欢迎拍砖 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="height:100%;"> <head> <meta http-e

  • 基于jquery完美拖拽，可返回拖动轨迹

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JQuery拖拽元素改变大小尺寸实现代码

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容易.以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单.清晰得多了 下面是 JavaScript Code 复制代码 代码如下: <script type="text/javascript"> /* * jQuery.Resize by wuxinxi007 *

  • jQuery实现可拖动的浮动层完整代码

    以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm 光标移动到层上,按住鼠标就可以拖动层. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数. jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).off

  • jquery简单的拖动效果实现原理及示例

    复制代码 代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖曵原理实例</title> <style type="text/css"> #drag{width:400px;height:300px;backgr

  • jQuery 可以拖动的div实现代码 脚本之家修正版

    jQuery 可以拖动的div实现代码 脚本之家修正版

    当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了. 研究的过程中顺便用jQuery实现了一个div的拖动,代码附于本文结尾. 实现的思路请参考我的可以拖动的DIV(二)一文. 在参考jQuery中文网站中的例子时,我发现他们在div窗口标题栏触发click事件时,将div的位置移上了一些,而mouseup的事件注册在整个div窗口上,这个思路让我很受启发,解决了鼠标移动很快而div不能跟上导致的错误,非常好的解决办法. 另外,请注意事件起泡,在jQuery以及任何实现div拖动的js

  • 基于jquery的一行代码轻松实现拖动效果

    实现拖动效果. 复制代码 代码如下: $(document).ready( function() { $("#divPanel").easydrag(); } ); Html 代码 复制代码 代码如下: <div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:5

  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

  • jQuery实现的跨容器无缝拖动效果代码

    本文实例讲述了jQuery实现的跨容器无缝拖动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

  • Javascript基于jQuery UI实现选中区域拖拽效果

    Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • 基于jQuery实现多标签页切换的效果(web前端开发)

    基于jQuery实现多标签页切换的效果(web前端开发)

    这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

  • 基于jQuery实现仿百度首页选项卡切换效果

    基于jQuery实现仿百度首页选项卡切换效果

    以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&

  • 基于jQuery实现最基本的淡入淡出效果实例

    基于jQuery实现最基本的淡入淡出效果实例

    本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求.其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ. 一.基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环.如下图所示: 二.制作过程 1.首先你要到JQ官网中下载一个JQ支持文

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • 基于jQuery插件jqzoom实现的图片放大镜效果示例

    基于jQuery插件jqzoom实现的图片放大镜效果示例

    本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果.分享给大家供大家参考,具体如下: jqzoom插件实现图片放大镜效果. 图1.1jqzoom插件实现图片放大镜效果 1.引入jqurty和jqzoom插件 <script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script> <script src="/js/common/jquer

  • iOS中一行代码实现 UIView 镂空效果

    这是一种实现 UIView 镂空效果的方案,可以快速实现任意形状的镂空.文字的镂空.带镂空的毛玻璃效果等.本质上是 UIView 的 maskView 效果. 前言 首先来复习一下遮罩效果的实现.如果我们有一张图片,又恰好有一个圆,当我们把圆设置为图片的遮罩时,会得到这样的结果. 代码实现看上去像是这样: view.maskView = maskView; 那么问题来了,如果我们希望得到下面的结果,该怎么做呢?这看起来像是图层的相减,即原来的图层减去遮罩的部分. 可惜苹果爸爸不够贴心,没有提供方

随机推荐