关注前端开发
关注用户体验

jquery 模块拖拽

这是模块拖拽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);//松开鼠标后停止移动并恢复成不透明
  });
});

演示demo:http://www.daqianduan.com/demo/drag.html

未经允许不得转载:大前端 » jquery 模块拖拽
分享到:更多 ()

评论 20

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #12

    chrome上不行。

    deancheng2年前 (2014-09-23)回复
  2. #11

    😛

    asddddddd5年前 (2012-08-08)回复
  3. #10

    我也用这段代码耶 不过不知道在拖动的过程中如何改变鼠标 cursor:move 都无效

    xmsz5年前 (2012-01-31)回复
  4. #9

    if(_move){

    var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置

    var y=e.pageY-_y;
    if(x<0){
    x=0
    }
    if(y<0){
    y=0
    }
    $(".drag").css({top:y,left:x});//控件新位置

    }

    小谢5年前 (2011-11-25)回复
  5. #8

    太专业了!路过的

    lace wigs5年前 (2011-10-05)回复
  6. #7

    mouseup为什么没用啊 松开鼠标后还是会移动

    孙海勋6年前 (2011-08-20)回复
    • 我也遇到和你一样的问题啊! 只能正常拖拽一次,后面的就会跟着鼠标走了, 😕 这是为什么呢?

      Gavin5年前 (2011-12-24)回复
      • 我用ff和IE6+没有问题
        IE6的确存在这个问题, 你们用的是IE6?

        lucoy5年前 (2012-01-29)回复
  7. #6

    用JQ UI就好了,这个这么复杂….

    kttl6年前 (2011-08-16)回复
  8. #5

    刚刚试了下,为什么当drag在没有设置初始top和left下的情况下无法拖动???

    文润6年前 (2011-08-03)回复
  9. #4

    I just bookmarked your blog to read it letter, great information. Regards,^ ^

  10. #3

    ie6下面有鼠标和模块粘连的情况出现!

    yfztcy6年前 (2011-06-17)回复
  11. #2

    Hi ,I have read your articles with links from Search.This request permission. Suggestions for property in Thailand Thank You. Regards,^ ^

  12. #1

    IE下不work啊…. 😕

    渣苏6年前 (2011-01-07)回复
    • 刚刚有测试一遍 ff ie6、7、8、9 chrome都支持的

      浩子6年前 (2011-01-07)回复
    • 你再试试吧,不行发邮件给我

      浩子6年前 (2011-01-07)回复

themebetter 国内更好的WordPress主题服务商

立即前往