基于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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
详解React 元素渲染
Jul 07 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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代码包装修正版
2008/03/15 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
python3.7 的新特性详解
2019/07/25 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
解决pip install psycopg2出错问题
2020/07/09 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
大学生自我评价怎样写好
2013/10/23 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
课程设计心得体会
2013/12/28 职场文书
家长评语大全
2014/01/22 职场文书
户外婚礼策划方案
2014/02/08 职场文书
离婚协议书范本样本
2014/08/19 职场文书
电影开国大典观后感
2015/06/04 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript