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


Posted in Javascript onDecember 28, 2010

实现拖动效果.

$(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打包
Javascript 相关文章推荐
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
JS date对象的减法处理实现代码
Dec 28 #Javascript
javascript中检测变量的类型的代码
Dec 28 #Javascript
javascript中的作用域scope介绍
Dec 28 #Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 #Javascript
按给定几率进行随机抽取的js代码
Dec 28 #Javascript
围观tangram js库
Dec 28 #Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 #Javascript
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
canvas实现钟表效果
2017/02/13 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Vue.js 表单控件操作小结
2018/03/29 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
linux面试相关问题
2013/04/28 面试题
50岁生日感言
2014/01/23 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
员工年终考核评语
2014/12/31 职场文书