draggable box little glitch

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 glitch when I drag the mouse cursor to the left of the box limit: the text inside the box gets selected.

How can I solve it? Thanks.

JavaScript:

$(document).ready(function () {

    var x = 0;
    var y = 0;

    $("#d").live("mousedown", function () {

        var element = $(this);
        var parent = element.parent();

        $(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;

            // hold inside left
            if (left <= 0) left = 0;

            // hold inside right
            var max_right = (parseFloat(element.outerWidth()) - parent.width()) * -1;
            if (left >= max_right) left = max_right;

            element.css("left", left);

            var top = parseFloat(element.css("top")) + y_movement;

            // hold inside top
            if (top <= 0) top = 0;

            // hold inside bottom
            var max_bottom = (parseFloat(element.outerHeight()) - parent.height()) * -1;
            if (top >= max_bottom) top = max_bottom;

            element.css("top", top);

            return false;

        });

    });

    $(document).mouseup(function () {
        x = 0;
        y = 0;
        $(document).unbind("mousemove");
    });

});

HTML:

<div style="position: relative; width: 500px; height: 500px; background-color: Red;">
    <div id="d" style="position: absolute; width: 100px; left: 0px; height: 100px; top: 0px; cursor: move; border: 1px solid black;">a</div>
</div>

http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable — veritasetratio, Jun 12 '12 at 23:37

score 2 · Answer 1 · answered Jun 12 '12 at 23:37

The fact, that the text is selected has nothing to do with the JavaScript. This is a issue of the browser and selecting text if you move arround the mouse cursor while one button is down.

You could apply some css, which will prevent the text from getting selected, at least on modern browsers:

#d {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

(This is no standard css, but it should work.)

is there another way to do that? – user1330271 Jun 12 '12 at 23:40 — user1330271, Jun 12 '12 at 23:40

score 1 · Answer 2 · answered Jun 12 '12 at 23:37

1

You can prevent selection using CSS on the element, as well as adding the unselectable="on" attribute to the element

Example: http://jsfiddle.net/PS79Y/

Css:

#d{
 -moz-user-select: -moz-none; 
 -khtml-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

To see the example between -moz-none and just none, visit https://developer.mozilla.org/en/CSS/user-select

answered Jun 12 '12 at 23:37

sottenad

2,646
2
16
18

you were faster. I should stop fixing the formation of the questions before answering the question itself. – TheHippo Jun 12 '12 at 23:38

draggable box little glitch

2 Answers2