Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Hi,

    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/de...tatransfer.asp for more details on the dataTransfer object.

    Any Help is much appreciated.

    Best,

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Based on the link you posted, I was able to make it work in the same window.
    Code:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •