Make a div follow the mouse just when the mouse is on mousedown

Question

I'm trying to make a jquery function to follow the mouse coursor with a div, when it is on mousedown and when it is on mouseup it stay in the last position it was.

any sugestion.

Answer 1

I've put together a simple working example that defines a Draggable object. You specify the drag item (the element that you're moving around), as well as a drag boundary (the space—or element—that you are moving the item inside of). The concept of a boundary is important if you ever want to restrict a draggable item to a certain space on the page (such as a container), or define a relative coordinate system on which to base your math.

My solution isn't the fastest, but it demonstrates the concept:

$(function() {

    window.mousedown = 0;
    $(window).on('mousedown mouseup', function(e) {
        if(e.type == 'mousedown') { this.mousedown++; }
        else { this.mousedown--; }
    });

    var Draggable = function(dragItem, dragBoundary) {
        this.item = $(dragItem).css('position', 'absolute');
        this.item.on('mousemove', $.proxy(this.handleDragEvent, this));
        this.boundary = $(dragBoundary).css('position', 'relative');
    };

    Draggable.prototype.handleDragEvent = function(e) {
        if(window.mousedown) {

            var mousePosition = this.mapToBoundary([e.clientX, e.clientY]);
            var mouseX = mousePosition[0],
                mouseY = mousePosition[1];

            if(typeof this.prevMouseX == "undefined") this.prevMouseX = mouseX;
            if(typeof this.prevMouseY == "undefined") this.prevMouseY = mouseY;

            this.itemX = this.item.offset().left - this.boundary.offset().left;
            this.itemY = this.item.offset().top - this.boundary.offset().top;

            var deltaX = mouseX - this.prevMouseX,
                deltaY = mouseY - this.prevMouseY;

            this.item.css({
                'left': this.itemX + deltaX,
                'top': this.itemY + deltaY
            });

            this.prevMouseX = mouseX;
            this.prevMouseY = mouseY;

        }
    };

    Draggable.prototype.mapToBoundary = function(coord) {
        var x = coord[0] - this.boundary.offset().left;
        var y = coord[1] - this.boundary.offset().top;
        return [x,y];
    };

    var draggable = new Draggable($('.draggable'), $('.container'));

});

Notice that we are maintaining a mousedown value on global, allowing us to determine when it would be appropriate to drag around our element (we only add a mousemove listener to the drag item itself). I've also included a spacer div above the boundary div to demonstrate how you can move the boundary anywhere around the page and the coordinate system is still accurate. The code to actually restrict a draggable item within its assigned boundary could be written using simple math.

Here is the fiddle: http://jsfiddle.net/bTh9s/3/

EDIT:

Here is the start to some code for restricting a Draggable item within its container.

Draggable.prototype.restrictItemToBoundary = function() {

    var position = this.item.position();
        position.right = position.left + this.item.outerWidth();
        position.bottom = position.top + this.item.outerHeight();

    if(position.left <= 0) {
        this.item.css('left', 1);
    } else if(position.right >= this.boundary.outerWidth()) {
        this.item.css('left', this.boundary.outerWidth() - this.item.outerWidth());
    }

    if(position.top <= 0) {
        this.item.css('top', 1);
    } else if(position.bottom >= this.boundary.outerHeight()) {
        this.item.css('top', this.boundary.outerHeight() - this.item.outerHeight());
    }

};

This method should be called inside of Draggable.handleDragEvent just after you update the CSS positioning of the drag item. It seems this solution is glitchy, but it's a start.

Answer 2

Why not simply use drag and drop by jquery:

<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>

Jquery draggable