JQuery - Clicking and dragging divs on a screen WITHOUT draggable

Question

I'm currently working on a small project, with draggable divs. The code I've created seems to not be working, and it causes JQuery to stop responding.

Is there a nice and easy way to do this without using .draggable ?

var hold = false;
        //Drag Elements

        $('#example').mousedown(function(){
            hold = true;
        });

        $('#example').mouseup(function(){
            hold = false;
        });

        $(document).on('mousemove', function(e){
            $('#example').css({
                while(hold){
                    left:   e.pageX-50,
                    top:    e.pageY-50
                }
            });
        });

Thanks

Answer 1

Since Javascript is single-threaded, your while loop never exits, because the mouseup handler can't run while you're stuck in the mousemove handler.

Change while to if :

    $(document).on('mousemove', function(e){
        if (hold) {
            $('#example').css({
                left:   e.pageX-50,
                top:    e.pageY-50
            });
        }
    });