Ignoring/canceling browser drag for JavaScript drag & drop

Question

Hi guys,

I'm implementing a drag & drop script in (plain) JavaScript. All good, except one thing. For example, in Firefox (probably not only there), if you drag an object the second time, it is getting dragged as a built-in browser feature (for easy drag & drop image saving to desktop, for example, I think). Well this kind of ruins my script.

Thing is, I know this is possible, and I've even done it before, but that was like a long time and I got it working by trial and error, just entered focus() and blur() all over the place 'till it seemed to actually loose focus.

So if someone knows how to clear this out for me, he'd be my personal hero. Blur() on the dragging object? focus() on a different one? etc.

Thanks!

//Ok, the parts of the code regarding this would be:

...
    this.handle.onmousedown = function(e)
    {
        self.startDragging(e);
    };
    this.handle.onmouseup = function(e)
    {
        self.stopDragging(e);
    };
    setInterval(function(){self.animate()}, 25);
...
startDragging: function(e)
{
    this.dragging = true;
},
stopDragging: function(e)
{
    this.dragging = false;
},
animate: function()
{
    if(this.dragging)
...

Answer 1

Unless I misinterpreted your question, try event.preventDefault(); in your mousedown event listener. It would help if you could provide snippets of code to show us how you are implementing drag/drop.

Edit: With your implementation, something like this should work:

this.handle.onmousedown = function(e) {
    if(!e) e = window.event;
    if(e.preventDefault) e.preventDefault();
    else e.returnValue = false;

    self.startDragging(e);
};

However, I would recommend using event listeners instead.