Dragging and releasing a div using mouse drag


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() {
                    if (e.pageX > prevX) {
                        currentDivX = parseInt($('#scrollText').css('left'));
                        $('#scrollText').css('left', currentDivX+1 + 'px');
                        prevX = e.pageX;

            function deleteMove() {
                prevX = 0;


<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>

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

Can anyone help? Thanks.

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

You will get better results faster…