Dragging and releasing a div using mouse drag

JavaScript
1

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:


<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

I can recommend using jQuery UI for it - http://jqueryui.com/demos/draggable/

You will get better results faster…