这是模块拖拽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 模块拖拽的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. jQuery 鼠标拖拽移动窗口

    拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果&q ...

  4. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  5. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  6. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  7. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. SpringMvc+jQuery 文件拖拽上传、选择上传

    最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...

  9. 面向对象+jquery实现拖拽功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. easyui源码翻译1.32--Droppable(放置)

    前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...

  2. [jobdu]二维数组中的查找

    http://ac.jobdu.com/problem.php?pid=1384 基本思路很简单,从最右上角找起. 九度的OJ做得还是不太行啊.必须要int main()才行,这道题时间卡得太紧,用c ...

  3. Java泛型反射机制(二)

    /** * @author Administrator * 好处:泛型:1安全 2减少代码重用率 */ package com.test; import java.lang.reflect.Metho ...

  4. 交叉编译 小米路由器mini 的 python(MIPS)

    看了很多文章,要么说的是用opkg安装python,要么说的是小米路由器的交叉编译,就是没有mini的.学习了这篇文章(http://me.deepgully.com/post/56389167868 ...

  5. 【Linux安全】安全口令策略设置

    命令: vim /etc/login.defs 默认设置: # Password aging controls: # # PASS_MAX_DAYS Maximum number of days a ...

  6. SSO(转)

    一.介绍       主站下有多个子系统,每次登录主系统,跳转到子系统时,又需要重新登录: 子系统与主系统都有各自的用户信息表:各个系统的用户角色.权限也各不相同: 二.目的       每次登录主系 ...

  7. Ember.js demo4

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  8. S3C2410 ADS实验手册

    http://www.evernote.com/shard/s307/sh/b45f0e60-3232-4cbb-99f6-a273236a2faa/bd865ae048ac797585303ef54 ...

  9. linux下 修改配置文件的命令

    vi或vim 进入后,按i,屏幕下方会出现INSERT字样,此时可以修改内容 按ESC,退回命令模式 :x是保存退出 :q!是不保存退出

  10. 【HDOJ】3652 B-number

    终于自己写出来一道数位DP啊.继续训练DP. /* 3652 */ #include <iostream> #include <sstream> #include <st ...