View Full Version : Auto onDrag detection for images (as with the dataTransfer-object for text and urls)

06-16-2004, 10:43 AM

I'm new to this forum and have already search the forum for an answer, but couldn't find anything... Here's the problem:

I want to implement a drag&drop feature for images, but I cannot write a onDragStart (or onDrag, ...) handler, because I cannot access the source. Therefore, the drag-event needs to be recorded by the browser automatically (which I believe it does). That means: For dragging text and urls, there is an easy solution, because the browser stores the dragged element in the dataTransfer-object once you start dragging:

event.dataTransfer.getData( "{Text|URL}");

The line above queries the dataTransfer object for Text or a URL (depending on the item you have dragged). This works fine, which means that the browser stores the source-element that caused the drag-event automatically! However, it does not work for images. Any ideas here? The interesting thing is that when dragging an image from one browser window (A) into another (B), the image will show up in B upon dropping it. Therefore, the image (or its url) is stored somewhere once I start dragging it. BUT WHERE? AND HOW CAN I ACCESS THIS VIA Javascript? Or is this not possible?

See http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_datatransfer.asp for more details on the dataTransfer object.

Any Help is much appreciated.


06-16-2004, 11:40 AM
Based on the link you posted, I was able to make it work in the same window.

function InitiateDrag()
event.dataTransfer.setData("URL", oSource.src);

function FinishDrag()
sAnchorURL = event.dataTransfer.getData("URL");
oTarget.innerText = sAnchorURL;
<img src="http://www.codingforums.com/logo.gif" id="oSource" ondragstart="InitiateDrag()" />
<SPAN ID="oTarget" ondragenter="FinishDrag()">Drop the Image Here</SPAN>

Still working on dragging and dropping onto another window.