页面悬浮框拖拽实例

Demo如下，拖拽效果理想

刺破乌云.jpg

var oldX =0;
var oldY =0;
//拖动
function Drag(){
    $("#&&").parent().mousemove(function(event){
        //得到x坐标和Y坐标
        var x=event.clientX;
        var y=event.clientY;
        //得到可拖动框的高度和宽度
        var top=$("#&&").parent ().css("top").replace('px','');
        var left=$("#&&" ).parent ().css("left").replace('px','');
        if(oldX >0){
            var diffY =parseInt(y-oldY);
            var diffX = parseInt(x-oldX);

            console.log('X: '+ x + 'diffX:' + diffX);
            console.log('y:'+ y+ 'diffY:'+ diffY):

            console.log(top+diffY );
            console.log(left+diffX );
            //确定拖动的时候x,Y的值
            $("#&&").parent ().css("top",parseInt(top)+diffX+"px");
            $("#&&").parent ().css("left",parseInt (left)+diffX+"px");
        }
        oldY =y;
        oldX = x;
    });

    $("#&&").parent().mouseleave(function(){
        //解除mousemove的绑定
        $("#&&").parent().unbind("mousemove") :
        oldY=0:
        oldX =0;
        if(window.captureEvents){
            window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
            var d = document;
            d.onmousemove null;
            d.onmouseup = null;
        }
    });

}


// 鼠标松开事件
function MouseUp(){
    $("#&&").parent().mouseup(function(){
    //解除mousemove的绑定
    $("#&&").parent().unbind("mousemove");
    oldY =0;
    oldX =0;
    if(window.captureEvents){
        window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
        var d = document;
        d.onmousemove = null;
        d.onmouseup =null;
    })}
}

//鼠标拖动DIV,鼠标按下去的事件
 S(document).ready(function(e){
    //鼠标按下去的时候执行下面的代码
    $("#&&").parent().mousedown(function(){
        Drag();
        //鼠标点击的时候取消事件绑定
        MouseUp();
    });

    //解除mousemove的绑定
    s("#&&").parent().mouseup(function(){
        s("#&&").parent().unbind("mousemove");
        if(window.captureEvents){
         window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
         var d = document;
         d.onmousemove = null;
         d.onmouseup =null;
        }
    });
});