views:

1086

answers:

2

Hi there all, 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!

A: 

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.

Sergey Kovalenko
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.
Nicholas Flynt
+4  A: 

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
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?
Nicholas Flynt
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
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!
Nicholas Flynt
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