基于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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
javascript 数组操作详解
Jan 29 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
轻松搞定js表单验证
Oct 13 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python圣诞树编写实例详解
2020/02/13 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
python unichr函数知识点总结
2020/12/16 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
幼儿园三八妇女节活动方案
2014/03/11 职场文书
租房协议书
2014/04/10 职场文书
青春励志演讲稿
2014/04/29 职场文书
安全口号大全
2014/06/21 职场文书
农村党员对照检查材料
2014/09/24 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL