基于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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
AngularJS快速入门
Apr 02 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
关于js类的定义
2011/06/28 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript正则表达式实例详解
2016/10/16 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
使用JavaScript破解web
2018/09/28 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python模块学习 datetime介绍
2012/08/27 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python实现批量修改文件名代码
2017/09/10 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
OpenCV 边缘检测
2019/07/10 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
HSRP的含义以及如何工作
2014/09/10 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
大学生找工作推荐信范文
2013/11/28 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
公司委托书怎么写
2014/08/02 职场文书
校本研修个人总结
2015/02/28 职场文书
设备技术员岗位职责
2015/04/11 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python内置进制转换函数的操作
2021/06/02 Python