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

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

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

评论 24

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

    That put up appears to be get numerous website visitors. Will you support it? That it offers a sweet specific forget on the subject of problems. Man enduring one thing accurate and / or maybe a lot of to deliver facts about is essential task.

  2. #15

    Ever thought about what separates a great coach and mentor from the rest? And why great coaches get results while other get frustrated? “The biggest MISTAKE most people make about a coach is: They mistake a COACH for a BABY SITTER A BABY SITTER tells kids in a nice way that they need to do what they are told to do in a soft and caring voice as to not upset the child. A great baby sitter will smile when the child is throwing a tantrum. A COACH on the other hand is hired to get the best out of a person. They are not there to smile and tell a person what they want to hear. They are hired to get a result because they care about outcomes and getting the most out of a person. A great coach does not play stupid games with irresponsible people who think they want to get the best from themselves yet fail to show it in their actions. This is why great coaches Drop average players from their team all the time. When ADULTS hire a coach, it is not the coaches responsibility to do the work, run the laps or sweat. That’s what the player does. Coaches see how the player can best suit the game and find their unique talents and gifts, then put them in a position to win. If the player fails to turn up, then a good coach will drop the lazy, irresponsible player in turn for the player with a good attitude who is prepared to put in the work to succeed. Next time you are thinking about hiring a coach, just remember the best coaches drop lazy, irresponsible players all the time as they value their years of hard work, learning the art of what they coach and pride themselves on success. If you want to be a great player in the game of life or business; action, implementation and great communication is the key. “Make shit happen”. Great coaches love great clients or great players on their team.

    Asha Gierling2周前 (03-08)回复
  3. #14

    ABLEnding, Inc. has the ability to accommodate the funding for home purchases, refinancing, construction loans, home equity lines of credit, and commercial loans in Arizona. As a mortgage broker, Mark Ventrone works with lenders from all over the country – not just one – so you know you’ll always get the absolute lowest rates and fees and best product available for your particular situation. Getting a mortgage can be quite confusing, but Mark will PERSONALLY guide you through every step of the process providing excellent customer service, responding to most emails and calls. Looking for a mortgage brokers in Arizona, contact ABLEnding, Inc or call (602)362-6634 for more details.

    Joette Campion2周前 (03-07)回复
  4. #13

    Ever thought about what separates a great coach and mentor from the rest? And why great coaches get results while other get frustrated? “The biggest MISTAKE most people make about a coach is: They mistake a COACH for a BABY SITTER A BABY SITTER tells kids in a nice way that they need to do what they are told to do in a soft and caring voice as to not upset the child. A great baby sitter will smile when the child is throwing a tantrum. A COACH on the other hand is hired to get the best out of a person. They are not there to smile and tell a person what they want to hear. They are hired to get a result because they care about outcomes and getting the most out of a person. A great coach does not play stupid games with irresponsible people who think they want to get the best from themselves yet fail to show it in their actions. This is why great coaches Drop average players from their team all the time. When ADULTS hire a coach, it is not the coaches responsibility to do the work, run the laps or sweat. That’s what the player does. Coaches see how the player can best suit the game and find their unique talents and gifts, then put them in a position to win. If the player fails to turn up, then a good coach will drop the lazy, irresponsible player in turn for the player with a good attitude who is prepared to put in the work to succeed. Next time you are thinking about hiring a coach, just remember the best coaches drop lazy, irresponsible players all the time as they value their years of hard work, learning the art of what they coach and pride themselves on success. If you want to be a great player in the game of life or business; action, implementation and great communication is the key. “Make shit happen”. Great coaches love great clients or great players on their team.

    Anya Blye3周前 (03-04)回复
  5. #12

    chrome上不行。

    deancheng5年前 (2014-09-23)回复
  6. #11

    😛

    asddddddd7年前 (2012-08-08)回复
  7. #10

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

    xmsz7年前 (2012-01-31)回复
  8. #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});//控件新位置

    }

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

    太专业了!路过的

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

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

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

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

        lucoy7年前 (2012-01-29)回复
  11. #6

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

    kttl8年前 (2011-08-16)回复
  12. #5

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

    文润8年前 (2011-08-03)回复
  13. #4

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

  14. #3

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

    yfztcy8年前 (2011-06-17)回复
  15. #2

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

  16. #1

    IE下不work啊…. 😕

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

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

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

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

立即前往