jquery 模块拖拽功能的实现

来源:互联网 发布:js脚本代码 编辑:程序博客网 时间:2024/06/05 16:10

写一个demo示例

这是模块拖拽Javascript代码

$(function(){var _move=false;//移动标记var _x,_y;//鼠标离控件左上角的相对位置    $(".drag").click(function(){        //alert("click");//点击(松开后触发)        }).mousedown(function(e){        _move=true;        _x=e.pageX-parseInt($(".drag").css("left"));        _y=e.pageY-parseInt($(".drag").css("top"));        $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示    });    $(document).mousemove(function(e){        if(_move){            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置            var y=e.pageY-_y;            $(".drag").css({top:y,left:x});//控件新位置        }    }).mouseup(function(){    _move=false;    $(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  });});
原文地址:http://www.duxinzhe.cn/web/JavaScript/40.html
原创粉丝点击