拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"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. REST服务返回自定义的HttpResponseMessage

    WebApi框架中对资源的操作,都是通过其Controller提供的各种方法(GET,POST,PUT,DELET等)来实现,而这些方法的返回信息有以下几种形式: 方法返回类型 HttpRespons ...

  2. Jquery-选择框点击勾选或者取消

    1:单选框,直接定位到属性名称 $(document).ready(function(){ var old = null; //用来保存原来的对象 $("input[name='sex']& ...

  3. 控件 UI: 字体的自动继承的特性, Style, ControlTemplate

    字体的自动继承的特性 Style 样式 ControlTemplate 控件模板 示例1.演示字体的自动继承的特性Controls/UI/FontInherit.xaml <Page x:Cla ...

  4. js-JavaScript高级程序设计学习笔记12

    第十五章 使用canvas绘图 1.要使用<canvas>元素,必须先设置其width和height属性. 2.要在这块画布上绘图,需要先取得绘图上下文,取得绘图上下文对象的引用,需要调用 ...

  5. Servlet基础-手工编写第一个servlet

    [手工编写第一个servlet] [步骤] 1.继承HttpServlet 2.重写doGet()或者doPost()方法  //这个doGet或者doPost方法取决用户提交的方式 3.在web.x ...

  6. Codeforces Round #389 Div.2 D. Santa Claus and a Palindrome

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  7. 添加一个功能Action

    1,只用一个handler类,所有都事件的处理器都在一个handler类 handler要创建以Action为名称的方法 event要单独分开,继承KDEvent package com.kingde ...

  8. iOS GCD中的dispatch_group

    假如有一组任务,A,B,C,D,其中ABC是可以并行的,D是必须在ABC任务完成后再执行的. (举个场景,比如吃饭前必须先做菜.做饭和买饮料,然后才能开吃) 1.关于ABC的并行: 采用多线程的方式就 ...

  9. centos+nginx从零开始配置负载均衡

    nginx负载均衡的理解 nginx是一个轻量级的.高性能的webserver,他主要可以干下面两件事: 作为http服务器(和apache的效果一样) 作为反向代理服务器实现负载均衡 现在nginx ...

  10. 数据结构作业——sights(最短路/最近公共祖先)

    sights Description 美丽的小风姑娘打算去旅游散心,她走进了一座山,发现这座山有 n 个景点,由于山路难修,所以施工队只修了最少条的路,来保证 n 个景点联通,娇弱的小风姑娘不想走那么 ...