jQuery 鼠标拖拽移动窗口
2016-09-29 15:49
281 查看
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"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"); //移除不能选文字
});
});
相关文章推荐
- 【框架-MFC】禁用鼠标拖拽标题栏移动窗口
- js实现鼠标拖拽移动小窗口
- 【MFC】禁用鼠标拖拽标题栏移动窗口
- 窗口随鼠标移动
- jquery实现的提示浮层跟随鼠标移动
- 用jquery实现双色表格,鼠标移动到上面时,行变色~!
- 8、query鼠标移动选择面,并显示信息窗口
- AutoIt V3.2.13.7 可模拟PC鼠标移动和窗口来实现自动化任务
- 基于jQuery的的一个隔行变色,鼠标移动变色的小插件
- jquery实现的提示浮层跟随鼠标移动
- 如何实现鼠标拖拽窗口
- JQuery 实现鼠标移动的动态交替
- Javascript实现图片位置控制(鼠标拖拽 + 键盘方向键移动)源码分享
- 改装的tabs页面,鼠标移动上去切换,可以点击链接和jquery的UI是不同的
- 图片上传生成缩略图,并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- JQuery Dialog(JS模态窗口,可拖拽的DIV)
- 让窗口随鼠标左键移动
- 鼠标移动时让数据窗口中当前鼠标下的数据行改变颜色
- 提示浮层跟随鼠标移动(js版和jquery版)
- jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置