基于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生成asp.net服务器控件的代码
Feb 04 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 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
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue组件之间的数据传递方法详解
2019/04/19 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python如何通过protobuf实现rpc
2016/03/06 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
大学生团员个人总结
2015/02/14 职场文书
感动中国何玥观后感
2015/06/02 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Elasticsearch 配置详解
2022/04/19 Java/Android