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

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

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

评论 39

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

    Thanks for the help!

    Aimee24小时前回复
  2. #30

    I genuinely appreciate your work , Great post.

  3. #29

    Spot lets start on this write-up, I truly feel this website needs a lot more consideration. I’ll apt to be again to learn to read additional, thank you that information.

  4. #28

    I discovered your blog site website on the search engines and appearance many of your early posts. Continue to keep in the top notch operate. I recently additional up your Rss to my MSN News Reader. Seeking toward reading far more by you later on!…

    Ouida Bafia1周前 (05-13)回复
  5. #27

    After study several of the content for your web site now, and i genuinely much like your technique for blogging. I bookmarked it to my bookmark site list and will also be checking back soon. Pls consider my web site too and figure out what you think.

    Nonton Anime2周前 (05-11)回复
  6. #26

    Good day! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains. If you know of any please share. Thanks!

    cat blog2周前 (05-08)回复
  7. #25

    woah i like yur website. It really helped me with the info i wus looking for. Appcriciate it, will bookmark.

    pokerrepublik3周前 (05-03)回复
  8. #24

    Awsome info and straight to the point. I am not sure if this is truly the best place to ask but do you folks have any thoughts on where to hire some professional writers? Thx 🙂

    Mr. Ventrone4周前 (04-25)回复
  9. #23

    Greate post. Keep writing sucdh kind of info on your page.

    Im really impressed by it.
    Hi there, You’ve done a fantastic job. I will
    definitely digg it and in my opinion recommend to my
    friends. I’m sure they will be benefited from this site.

  10. #22

    Hello there! Do you know iff they make any plugins to assist with Searrch Engine Optimization? I’m
    trying to get my blog to rank forr some targeted keywords but I’m not seeing very
    gkod success. If you know of any plewase share. Many thanks!

    bovadacodes4周前 (04-24)回复
  11. #21

    Whhen I initially left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from
    now on whenever a comment is added I recieve 4 emails with the exact same comment.
    Perhaps there is a way you can remove me froom that service?
    Thank you!

  12. #20

    What i don’t realize is actually how you’re no longer really a lot more smartly-liked than you might be right now. You’re very intelligent. You already know thus considerably with regards to this subject, produced me individually believe it from a lot of varied angles. Its like men and women are not fascinated until it is something to accomplish with Woman gaga! Your personal stuffs excellent. All the time maintain it up!

    Darwin Owenby2个月前 (04-06)回复
  13. #19

    I blog frequently and I genuinely thank you for your information. Your article has truly peaked my interest. I’m going to take a note of your site and keep checking for new information about once a week. I opted in for your RSS feed as well.

    Apex Legends Season 12个月前 (04-02)回复
  14. #18

    Aw, this was an incredibly nice post. Taking the time and actual effort to make a really good article… but what can I say… I hesitate a whole lot and never seem to get nearly anything done.

    Apex Legends Season 12个月前 (03-31)回复
  15. #17

    F*ckin’ remarkable issues here. I am very satisfied to look your post. Thanks a lot and i am looking ahead to touch you. Will you kindly drop me a e-mail?

    my singing monsters2个月前 (03-28)回复
  16. #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.

    Marquerite Truver2个月前 (03-11)回复
  17. #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)回复
  18. #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 Campion3个月前 (03-07)回复
  19. #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)回复
  20. #12

    chrome上不行。

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

    😛

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

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

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

    }

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

    太专业了!路过的

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

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

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

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

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

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

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

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

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

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

  29. #3

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

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

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

  31. #1

    IE下不work啊…. 😕

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

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

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

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

立即前往