How do I drag an image smoothly around the screen using pure javascript

Question

I\'m trying to use JavaScript drag an image around the screen. I\'ve already written a script that works fine on divs with text, but when I use it on a image it works very inter

Answer 1

Also targ should be assigned only on startDrag and global (without var):

http://jsfiddle.net/gigyme/YNMEX/132/

<script type="text/javascript">
    function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }
            if(e.preventDefault) e.preventDefault();

            // IE uses srcElement, others use target
            targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;
            return false;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            // var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }
</script>

Answer 2

Bind a specific element of the drag event.

function log() {
    var debug = true;
    if (!debug)
        return;
    if (arguments) {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
}    

function Drag(element) {
    this.dragging = false;
    this.mouseDownPositionX = 0;
    this.mouseDownPositionY = 0;
    this.elementOriginalLeft = 0;
    this.elementOriginalTop = 0;
    var ref = this;
    this.startDrag = function (e) {
        e.preventDefault();
        ref.dragging = true;
        ref.mouseDownPositionX = e.clientX;
        ref.mouseDownPositionY = e.clientY;
        ref.elementOriginalLeft = parseInt(element.style.left);
        ref.elementOriginalTop = parseInt(element.style.top);
        // set mousemove event
        window.addEventListener('mousemove', ref.dragElement);
        log('startDrag');
    };
    this.unsetMouseMove = function () {
        // unset mousemove event
        window.removeEventListener('mousemove', ref.dragElement);
    };
    this.stopDrag = function (e) {
        e.preventDefault();
        ref.dragging = false;
        ref.unsetMouseMove();
        log('stopDrag');
    };
    this.dragElement = function (e) {
        log('dragging');
        if (!ref.dragging)
            return;
        e.preventDefault();
        // move element
        element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px';
        element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px';
        log('dragElement');
    };
    element.onmousedown = this.startDrag;
    element.onmouseup = this.stopDrag;
}

var myDrag = new Drag(yourElement);// bind event
console.log(myDrag.dragging);

Answer 3

You may add e.preventDefault(); at the end of your startDrag function

Answer 4

Simply add return false at the end of your startDrag function to keep the browser from handling the click event.