jquery 实现 div 拖动效果

//div拖动效果
$(function () {
    var _move = false;//移动标记  
    var _x, _y;//鼠标离控件左上角的相对位置  
    $(".login").click(function () {
        //alert("click");//点击(松开后触发)  
    }).mousedown(function (e) {
        _move = true;
        _x = e.pageX - parseInt($(".login").css("left"));
        _y = e.pageY - parseInt($(".login").css("top"));
        $(".login").fadeTo(20, 1);//点击后开始拖动并透明显示  
    });
    $(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置  
            var y = e.pageY - _y;
            $(".login").css({ top: y, left: x });//控件新位置  
        }
    }).mouseup(function () {
        _move = false;
        $(".login").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明   
    });
});


  
  
  
   New Document   
    
    
  
  
  
  
 
这个可以拖动哦 ^_^

你可能感兴趣的:(jquery 实现 div 拖动效果)