jQuery实现拖放

浏览数：25 / 时间：2015年06月09日

position属性必须设置为absolute,否则不起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<title>拖放功能</title>
<style type="text/css">
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}  
</style>
<script type="text/javascript">
$(document).ready(function(){
    var _move=false;                                    //判断目标对象是否处于移动状态
    var _x,_y;                                          //鼠标离控件左上角的相对x、y的位置
    $(".drag").click(function(){
    }).mousedown(function(e){                           //当按下鼠标左键时
        _move=true;                                     //将移动标记设为true
        _x=e.pageX-parseInt($(".drag").css("left"));    //得到左上角x的位置
        _y=e.pageY-parseInt($(".drag").css("top"));     //得到左上角y的位置
        $(".drag").fadeTo(20,0.5);                      //单击后开始拖动并透明显示
    })
    $(document).mousemove(function(e){                  //若开始移动鼠标且_move标记设置为true
        if(_move){    
            var x=e.pageX-_x;
            var y=e.pageY-_y;
            $(".drag").css({top:y+‘px‘,left:x+‘px‘});             //使用css设置控件的新位置
        }
    }).mouseup(function(){
        _move=false;
        $(".drag").fadeTo(‘fast‘,1);                    //松开鼠标后停止移动并恢复成不透明
    });

});
</script>
</head>
<body>
    <div class="drag">单击这里进行拖拽</div>
</body>
</html>