16

this is a bit of a specific question so I'll get right to the point.

I'm working on a short and simple drag and drop routine for part of a web application, and although the dragging and dropping bit works fine, the site goes all ugly-tastic during the operation because the browser still does the default operation and works on text selecting.

I've tried a few solutions mainly involving returning false from the mousedown or click events, and although they disable text selection in some browsers, they also seem to disable the mouseup event entirely, ruining the "drop" bit of the script and leaving this perma-floating icon hanging around the mouse-- not fun.

I don't really want text selection to be gone entirely, I just want to suggest that the browser... not do it while dragging, if that makes sense. Since I know the area that is affected (there are iframes involved) I can easily apply a property to the affected elements, etc. I can post code if necessary, but I'm looking for more of a general solution. Since this is an aesthetics thing only, I'm looking for a fix that works in most browsers, it's not really that crucial.

Thanks!

Soviut
  • 88,194
  • 49
  • 192
  • 260
Blank
  • 7,088
  • 12
  • 49
  • 69
  • ...and the attack of the redundant titles begins, I should kick myself. ^_^ I really should learn that "programmatically" is implied around here. – Blank May 21 '09 at 06:04

2 Answers2

18

In W3C browsers, you can call the preventDefault method on the event object. The IE equivalent is to set the returnValue to false.

function stopDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    }
    else {
        window.event.returnValue = false;
    }
    return false;
}

EDIT: Just re-read the question and you might also want to prevent the default action in the part of your code that handles the actual dragging, and not just at the initial mousedown or click.

Bryan
  • 2,870
  • 24
  • 39
  • 44
  • This works, but it seems to kill the mouseup event. Is there a way to detect when the button has been released after doing this? – Blank May 21 '09 at 18:30
  • Is the mouseup event attached to the object being dragged? If so, try attaching it to the document or the window instead. Attach it during the mousedown event on the drag object and then in the mouseup handler, detach it again. Also, b/c the handler will be executing in the context of the document object, you'll need to get creative with keeping a reference to the drag object. – Bryan May 21 '09 at 21:04
  • I got it to work eventually. I was starting the drag in an iFrame, and then drawing the object underneath the mouse in the container frame. (The goal of this is to "drop" the object onto another frame, fun fun.) So instead of listening for the mouseup in the starting iFrame, I needed to listen for a mouseup in all frames, including the parent. (iFrames listening respond by calling the parent's drop handling function with their position, etc.) This works, and seems to go fine and dandy with all browsers. Thanks a bunch! – Blank May 22 '09 at 01:04
  • No problem. I've recently been "reinventing the wheel" with things like drag and drop, resizing, collapsible containers, etc. All stuff that the common frameworks do quite well, of course, but I wanted to learn how to do it and expand my js chops in the process. Having recently just worked through many of these same issues myself with drag/drop I'm glad I could help someone else as a result. – Bryan May 22 '09 at 01:31
  • +1 for bringing to my attention that the selection-prevention needs to be placed in the mouseMove-handler instead of the the mouseDown-handler – Clox Jan 04 '14 at 22:53
  • Calling `e.preventDefault();` during the `mousedown` event seemed to work fine by itself. Selection works after the drag is over. – Keavon Jul 20 '14 at 03:55
0

as far I know, dragged element must be positioned over other elements under mouse pointer. If it will moving with the mouse pointer, it prevent any selections on the page.

Sergei Kovalenko
  • 1,402
  • 12
  • 17
  • 1
    This doesn't appear to be true. The method I'm using is a ghost method, I create a dummy copy of the object to drag around, and it's not actually removed from the old page until a drop is successful. – Blank May 21 '09 at 18:20