draggable box width glitch

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>

Answers


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/


Instead of this :

$("#d").live("mousedown", function () {
 // your code here
}); // live

try this :

$("body").on("mousedown","#d", function(){
 // your code here
 $("#parent_container").css({"overflow-x":"hidden"});
 // or $("body").css({"overflow-x":"hidden"});
}); // on

Where #parent_container is where your draggable object is.

You should be using jQuery 1.7+

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().


Need Your Help

Trying in insert values into a database, but the insert() is failing

android sqlite

So, I have an application I'm making that can be simply described as a task list. I'm using an SQLite database to store all the data. I'm having various problems with the database, but let's stick ...

Why MPMusicPlayerController MPMusicPlayerControllerPlaybackStateDidChangeNotification called twice?

ios notifications mpmusicplayercontroller

I am using following code for playing a song from device. I added notification for MPMusicPlayerController to recognize state of the player.