基于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 相关文章推荐
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JavaScript门面模式详解
Oct 19 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
python 中split 和 strip的实例详解
2017/07/12 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
导师评语大全
2014/04/26 职场文书
画展邀请函
2015/01/31 职场文书
统计工作个人总结
2015/03/03 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
幼儿园六一主持词
2015/06/30 职场文书
三八妇女节主持词
2015/07/04 职场文书