拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果"left"属性为数字,直接使用"left"即可。

// 弹窗模块拖拽拖动
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var _dragZone = $(".M_boxCenter .M_boxBody > h3");
var _dragBody = _dragZone.parent(); _dragZone.mousedown(function(e){
$(this).attr("onselectstart", "return false"); //禁双击选中
$("body").css({"-webkit-user-select":"none", "-moz-user-select":"none", "-ms-user-select":"none", "-khtml-user-select":"none", "user-select":"none"}); //禁止选中文字 _move=true;
_x=e.pageX-parseInt(_dragBody.css("margin-left"));
_y=e.pageY-parseInt(_dragBody.css("margin-top"));
_dragBody.fadeTo(150, 0.5);
}); $(document).mousemove(function(e){ if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
if(e.pageX <= 0 || e.pageY <= 0){
_move=false;
}else {
_dragBody.css({marginLeft:x, marginTop:y});//控件新位置
}
}
}).mouseup(function(){
_move=false;
_dragBody.fadeTo("fast", 1); $("body").removeAttr("style"); //移除不能选文字
});
});

jQuery 鼠标拖拽移动窗口的更多相关文章

  1. jQuery 鼠标拖拽排序

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

  2. 鼠标拖拽移动Java界面组件

    默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖 ...

  3. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  4. 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

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

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

  6. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

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

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

  8. 鼠标拖拽定位和DOM各种尺寸详解

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

  9. JS Event 鼠标拖拽事件

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

随机推荐

  1. 给<tr>标签添加边框

    今天做网站时发现给<tr>添加border无效.起初还以为tr不支持这个属性,百度,原来只要给<table>添加一句代码就可以了,代码如下: table{border-coll ...

  2. VS调试网页的localhost

    那个像是iis的服务器叫: 只能访问自己的localhost,也就是127.0.0.1是回环地址(LoopBack),就是表示访问本机,是不用经过网卡的. 别名就是localhost.这种地址无法再外 ...

  3. 【vijos1900】 学姐吃寿司

    https://vijos.org/p/1900 (题目链接) 题意 给出一个01环,问最少经过多少次相邻互换使得所有的0聚在一坨,所有的1聚在一坨. Solution 源自:LCF Solution ...

  4. 使用oracle存储过程遇到的坑

    之前一直都是用sqlserver 突然用oracle  蛋疼的连存储过程执行一个查询都不会 各种百度锕  现在记录下面的语法问题 orcale创建一个存储过程的语法. create or replac ...

  5. linux时间时区设置

    用linux的时候大家可能会遇到时间不对,时区不对的情况.比如使用网上廉价的国外的linux的vps,时区是国外的.那么如何在不劳烦管理员的情况下自己动手呢?首先要了解硬件时钟与系统时钟,计算机上的B ...

  6. Nginx 日志分享

    Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...

  7. shell 调试手段总结

    对于厌烦了的 print 和 echo,可以尝试点新鲜省力的小手段. 1. 使用 shell 的执行选项 sh 和 bash 常用的执行指令有:-n.-x.-c.-v. 其中: -n 是 noexec ...

  8. CentOS安装MongoDB

    1. touch /etc/yum.repos.d/mongodb.repo vi /etc/yum.repos.d/mongodb.repo [mongodb]        name=MongoD ...

  9. Vijos1921严厉的班长

    传送门 在贴吧上看到了这道题,恰好最近在学相关的东西,觉得比较有意思就去做了. 第一眼看上去比较像搜索,其实是道状压DP.我简单讲一下思路: 首先明确,不管之前取了什么数,取1必定满足所有的数之间互质 ...

  10. Rabbitmq -Publish_Subscribe模式- python编码实现

    what is Exchanges ?? Let's quickly go over what we covered in the previous tutorials: A producer is ...