jQuery 鼠标拖拽移动窗口
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"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 鼠标拖拽移动窗口的更多相关文章
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 鼠标拖拽移动Java界面组件
默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 完美实现鼠标拖拽事件,解决各种小bug,基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- 鼠标拖拽定位和DOM各种尺寸详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- 问题-栈S最多能容纳4个元素,现有6个元素按A、B、C、D、E、F顺序进栈,问可能的出栈顺序。
住栈的特性:对于取出栈内元素每次只能从栈顶开始取(后进先出(栈满时,只能先出后进)) 由于栈内只能容纳4个元素: 所以 E F不可能第一个出栈: 当栈内少于四个元素时 既可以选择进栈,也可以选择出栈 ...
- CentOS6.5下搭建NFS文件服务器
本文参考这里 CentOS下搭建NFS服务器总结 环境介绍: 1. 服务器: 192.168.0.100 2. 客户机: 192.168.0.101 安装软件包: 服务器和客户机都要安装nfs 和 r ...
- yum命令mysql,jdk,tomcat
一.首先使用Yum list available xxx命令罗列出远程仓库里面可以安装的包 1.列出可以安装的java包 yum list available java* 输出如下: 2.列出可以安装 ...
- 【POJ 3525】Most Distant Point from the Sea(直线平移、半平面交)
按逆时针顺序给出n个点,求它们组成的多边形的最大内切圆半径. 二分这个半径,将所有直线向多边形中心平移r距离,如果半平面交不存在那么r大了,否则r小了. 平移直线就是对于向量ab,因为是逆时针的,向中 ...
- python time函数
时间间隔是以秒为单位的浮点小数. 每个时间戳都以自从1970年1月1日午夜(历元)经过了多长时间来表示. Python附带的受欢迎的time模块下有很多函数可以转换常见日期格式.如函数time.tim ...
- Leetcode 372. Super Pow
使用公式 c = ab => c mod d = [a mod d * b mod d] mod d 所以a^423 mod d = (a^100)^4 * (a ^10)^2 * a^3 ...
- 【poj1014】 Dividing
http://poj.org/problem?id=1014 (题目链接) 题意 给出有分别价值为1,2,3,4,5,6的6种物品,输入6个数字,表示相应价值的物品的数量,问一下能不能将物品分成两份, ...
- codeforces 342E :Xenia and Tree
Description Xenia the programmer has a tree consisting of n nodes. We will consider the tree nodes i ...
- Android程序设计-简单手机通讯录
在微信中,手机QQ中你会发现软件读取手机通讯录这个功能,这个功能使得软件更好的与手机联系人绑定,从而达到分享,拨打电话,读取用户信息等操作.下面我们将通过一个demo实现这个功能 首先我们看一下效果图 ...
- Android成长日记-Fragment
(一)Android在3.0中引入了Fragment的概念,主要目的是用在大屏幕设备上—例如平板电脑上,支持更加动态和灵活的UI设计.平板电脑的屏幕要比手机大的多,有更多的空间放更多的UI组件,并且这 ...