Question

Usually I prefer to write my own solutions for trivial problems because generally plugins add a lot of unneeded functionality and increase your project in size. Size makes a page slower and a 30k difference (compared to jquery draggable) in a 100k pageviews / day website makes a big difference in the bill. I already use jquery and I think that’s all I need for now, so please, don’t tell me to use another plugin or framework to drag things around.

Whit that in mind I wrote the following code, to allow a box to be draggable around. The code works just fine (any tip about the code itself will be great appreciate), but I got a small little glitch.

When I drag the box to the browser right edge limit, a horizontal scroll bar appears, the window width gets bigger because of the box. The desirable behavior is to see no horizontal scroll bar, but allow to put part of the box outside the window area, like a windows window do.

Any tips?

CSS:

.draggable {
    position: absolute;
    cursor: move;
    border: 1px solid black;
}

Javascript:

$(document).ready(function() {
    var x = 0;
    var y = 0;
    $("#d").live("mousedown", function() {
        var element = $(this);
        $(document).mousemove(function(e) {
            var x_movement = 0;
            var y_movement = 0;
            if (x == e.pageX || x == 0) {
                x = e.pageX;
            } else {
                x_movement = e.pageX - x;
                x = e.pageX;
            }
            if (y == e.pageY || y == 0) {
                y = e.pageY;
            } else {
                y_movement = e.pageY - y;
                y = e.pageY;
            }
            var left = parseFloat(element.css("left")) + x_movement;
            element.css("left", left);
            var top = parseFloat(element.css("top")) + y_movement;
            element.css("top", top);
            return false;
        });
    });
    $(document).mouseup(function() {
        x = 0;
        y = 0;
        $(document).unbind("mousemove");
    });
});​

HTML:

<div id="d" style="width: 100px; left: 0px; height: 100px; top: 0px;" class="draggable">a</div>

Answer 1

For a simple solution, you could just add some CSS to the draggable object’s container to prevent the scrollbars.

body { overflow: hidden; }

jsFiddle: http://jsfiddle.net/F894P/