SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dragging and releasing a div using mouse drag.

    Hi!

    I want to let the mouse drag a div using a left click and when it releases, it stops dragging. This is my code:

    Code HTML4Strict:
    <script type="text/javascript">
                var prevX = 0;
                var currentDivX = 0;           
     
                function detectMove() {
                    $(window).mousemove(function(e){
                        if (e.pageX > prevX) {
                            currentDivX = parseInt($('#scrollText').css('left'));
                            $('#scrollText').css('left', currentDivX+1 + 'px');
                            prevX = e.pageX;
                        }
                    });
                }
     
                function deleteMove() { 
                    $('#scrollText').unbind('onmousedown');
                    $(window).mousemove(function(e){});
                    prevX = 0;
     
                }
            </script>
     
    <div style="overflow: hidden; width: 100px">
                    <div id="scrollText" onmousedown="detectMove()" onmouseup="deleteMove()" style="left:0px;position: absolute;">This is a test. This is a test.</div>
                </div>

    But when I release the mouse button, the text still moves.

    Can anyone help? Thanks.

  2. #2
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can recommend using jQuery UI for it - http://jqueryui.com/demos/draggable/

    You will get better results faster...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •