当前位置:首页> 编程笔记> JS/JQuery
关键字
文章内容
用jquery实现模态窗口移动代码
 
 
修改时间:[2012/06/30 00:03]    阅读次数:[1591]    发表者:[沩筱]
 

今天在JQuery编写的模态窗口上,添加了移动的功能。

是在模态窗口对像上增加鼠标按下,移动,释放等动作。

代码实现如下:

var moveFlag = false;
$("<div>").mousedown(function(event){
    moveFlag = true;
    var yPos=parseInt($(this).css('top'));
    var xPos=parseInt($(this).css('left'));
    var x = event.clientX;
    var y = event.clientY;
    $(this).mousemove(function(event){
        if(moveFlag==true){
            x1 = event.clientX;
            y1 = event.clientY;
            var curX = xPos+x1-x;
            var curY = yPos+y1-y;
            $(this).css('top',curY+'px').css('left',curX+'px');
        }
    })                                      
});
$("<div>").mouseup(function(event){
    moveFlag = false;                           
});

上面就是该部分代码。