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"); //移除不能選文字
});
});





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM