jquery 模块拖拽
这是模块拖拽Javascript代码
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".drag").click(function(){
//alert("click");//点击(松开后触发)
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
$(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(".drag").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
演示demo:http://www.daqianduan.com/demo/drag.html
jquery 模块拖拽的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- jQuery 鼠标拖拽移动窗口
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果&q ...
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- SpringMvc+jQuery 文件拖拽上传、选择上传
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...
- 面向对象+jquery实现拖拽功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 利用百度地图API,在浏览器中找到自己的位置
首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key 剩下的就是编码了 这里面会用到一个javascript里的一个函数,getMyLocation ...
- 国内静态文件CDN服务介绍 国内js公共库
国内静态文件CDN服务介绍 新浪SAE 介绍页 文件页 百度云 介绍页 七牛云存储介绍页 优势,可以提交没有的库,支持https,但证书不可信. 又拍云 介绍页 建议使用阿里云OSS自己上传所需文件 ...
- Linux下 config/configure/Configure、make 、make test/make check、sudo make install 的作用
转自Linux下 config/configure/Configure.make .make test/make check.sudo make install 的作用 这些都是典型的使用GNU的AU ...
- 深度观察:腾讯收购大众点评背景下的O2O大格局
[亿欧导读] 腾讯入股大众点评获得20%股权,详情解读:①大众点评:独立自主为底线,要钱大于要流量:②腾讯:承认原生活服务O2O失败,丰富移动支付应用场景:③美团承受压力,拉手窝窝继续苦等买家:④BA ...
- cat命令常用的13个技巧
在Linux系统中,大多数配置文件.日志文件,甚至shell脚本都使用文本文件格式,因此,Linux系统存在着多种文本编辑器,但当你仅仅想要查看一下这些文件的内容时,可使用一个简单的命令-cat. c ...
- Show username instead of "System Account" in SharePoint 2010
Problems: When I load my local SharePoint site, the account always show as "System Account" ...
- 点点滴滴-ConfigurationManager.AppSettings
在写程序的配置文件,里面添加了几个配置,下面是appSettings节点的设置 <appSettings> <add key="StyleFolder" valu ...
- Yorhom浅谈:作为一名初中生,自学编程的点点滴滴 - Yorhom's Game Box
Yorhom浅谈:作为一名初中生,自学编程的点点滴滴 我是一名不折不扣的初中生,白天要背着书包去上学,晚上要拿起笔写作业.天天如此,年年如此. 我的爱好很广泛,喜欢了解历史,读侦探小说,骑车,打篮球, ...
- html5 鼠标跟随运动
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Mysql表的七种引擎类型,InnoDB和MyISAM引擎对比区别总结
InnoDB和MyISAM区别总结 我用MySQL的时候用的是Navicat for MySQL(Navicat for mysql v9.0.15注册码生成器)操作库.表操作的,默认的表就是Inno ...