Dragging div selects text on page (some browsers)

Question

Im using the following function to drag a div with a handle.

Problem is that in some browsers when i drag at the same time text is selected and highlighted on the page..

Any ideas how to fix it?

function enableDragging (ele) {
    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
        enableDragging.z = enableDragging.z || 1;
    var grabber = document.getElementById("myHandle");
    grabber.onmousedown = function (ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        current = target.parentElement;
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;
        console.log(dragging);

        document.onmousemove = function(ev) {

            ev = ev || window.event;

            //pauseEvent(ev);         
            if (dragging == true) {
                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;
                current.style.top = Sy + "px";
                current.style.left = Sx + "px";
                document.body.focus();
                // prevent text selection in IE
                document.onselectstart = function () { return false; };
                // prevent IE from trying to drag an image
                ev.ondragstart = function() { return false; };                  
                return false;   
            }
        }
        document.onmouseup = function(ev) {
            //alert("stop");
            dragging && (dragging = false);
        }
    };
}    

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Drag is started by:

    var ele = document.getElementById("divWrapper");
    enableDragging(ele);

Teemu · Accepted Answer · 2013-02-10T19:58:18.693

0

I'm sorry, I forget the second question in your previous post. However, you need to prevent default from onmouseup too:

document.onmouseup = function(ev) {
    ev = ev || window.event;
    dragging && (dragging = false);
    if (ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.cancelBubble=true;
        ev.returnValue=false;
    }
    return false;
}

EDIT

Or simply use your pauseEvent() function. Notice, that in your code there's this: ev.ondragstart = function () {...};. It's no use to assign the eventhandler to the Event object, rather assign that to the document or document.body. And also use that pauseEvent() in every eventhandler function too.

It looks like it's better to move document.onselectstart and document.ondragstart to the onmousedown handler, since those events have already fired when execution moves to onmousemove().

edited Feb 10 '13 at 19:58

answered Feb 10 '13 at 19:38

Teemu

22,918
7
53
106

Awesome! Now its only selecting text in Firefox, all other browser work. Any ideas how to fix it on FF too? When i move the div around the background text is selected – Laine Feb 10 '13 at 19:50
Not quite sure i understand what to do :) – Laine Feb 10 '13 at 19:57
`document.ondragstart = function() { return false; };` : ). Also notice, that this (and `document.onselectstart...`) should be moved to the `mousedown` handler function. And if you want to select things after dragging, you'll need to remove these handlers in `onmouseup()`. My FF doesn't select text after these changes... Did you uncomment `pauseEvent()` calls? – Teemu Feb 10 '13 at 20:01
Still selecting text in FF :/ – Laine Feb 10 '13 at 20:01
This [fiddle](http://jsfiddle.net/6zxuk/2/) works in my FF18.0.2, it doesn't select text while dragging. – Teemu Feb 10 '13 at 20:08
Still selects text in my FF for some reason :/ Browser compatibility gotta love it – Laine Feb 10 '13 at 20:18
This solved it! http://stackoverflow.com/questions/5211411/handling-text-selection-event-in-firefox-extension-preventing-user-from-selecti – Laine Feb 10 '13 at 20:26
Ofcourse! I had totally forgotten `user-select`. Just remember, it won't work in older IEs, so you still need those IE hacks in your code : ). Also there was a wrong version of my fiddle in the previous link. I just realized that if there's more text in the draggable, FF will randomly select it. – Teemu Feb 10 '13 at 20:29

Dragging div selects text on page (some browsers)

1 Answers1