[RESOLVED] Disable image dragging in firefox

Hello Everybody,

Is this possible I can disable the browser's (firefox) own image dragging? I am writing my own code to drag images and drop on certail locations on the page but I found that onMouseUp event doesn't fire on the target location until I release the mouse button and click again.

Thanks.

Let's see how you've assigned your event handlers.

http://67.18.159.90/collage/collage.asp?projectid=35

On this page you will see a list of thumbnail images that you can drag and drop into the "Insert Image Here" areas. This works fine on IE but on FF you need to drag the image and drop in on the "Insert Image Here" area and after dropping click again on the target area to get the image.

On the onMouseDown event of thumbnail image, I'm calling this function and assigning the image id to a variable called sourceId.

Code:

---

function DragImage(imgBox,e)
{
            sourceId = imgBox.id;
        document.style.cursor = "crosshair";       
}

---

On the onMouseDown event of target images, I'm calling this function to assign the src of the sourceId to target images.

Code:

---

function DropImage(imgBox)
{
        if(sourceId != "")
        {
                document.getElementById(imgBox.id).src = document.getElementById(sourceId).src;                       
                        sourceId = "";
            }
}

---

On the body onMoseUp event, I'm calling this function to empty sourceId and cancel any dragging.

Code:

---

function CancelDrag()
{
                sourceId = "";
}

---

What I found uptill now is that onMouseUp event on body and image doesn't fire on fire fox but works on IE.

Thanks.

It works fine for me in Firefox. Did you just fix it, or are you using an old version?

I'm using FF 2.0.0.11. I found the solution, I stopped dragging by using e.preventDefault() method.

Thanks.

Ah! yes, I should have remembered that in my first post. :blush:

Glad you found it.

I need some help understanding this. I want to disable the firefox image drag on my webpages.

I read about the e.prevent method but not sure how to implement this into my pages.

Can someone give me a bit more detail?

Nevermind. I found out how. I am just learning this stuff.

For those that are like me, here is what you do. Pretty easy actually.

< IMG SRC="yourimage.jpg" onmousedown="event.preventDefault()" >