SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Drag and Drop

  1. #1
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag and Drop

    Hi,
    I am trying to figure out how to enable the dragging and dropping of files into the browser window for a document management system. But everytime I try to catch the event supposedly fired the document dragged into the window simply loads up.

    I.E
    window.ondragdrop=myFunction;

    I have read through some of the JS reference docs on the netscape website they mention the enabling of UniversalBrowserRead privalege to be able to read the data parameter of the event, but make no mention to how to catch the event.

    Ive probably stopped making sense, but to recap I want to be able to get information such as the URL of a document that has been dragged into a region of a page. Currently IE just loads the document into the current window, I have tried capturing the dragdrop event and failed. Is there any way that I can make this work? Examples?

    Thanks for your time
    Barry

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Barry,

    I experimented with it a little. When dragging a file from Explorer and dropping it on the browser, I can stop the browser from loading the file but 'getData()' doesn't return any information about the file. I think it has to do with security settings (reference).

    This example is for IE only. What browser are you testing with?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>IE ondrop Test</title>
    <style type='text/css'>
    body {
      color:#000; background:#fff;
      margin:0; padding:20px;
    }
    textarea {
      width:400px; height:300px;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var e = document.body;
      e.ondragenter = myOnDragEnter;
      e.ondragover = myOnDragOver;
      e.ondrop = myOnDrop;
    }
    function myOnDragEnter()
    {
      window.event.returnValue = false;
      logEvent('');
    }
    function myOnDragOver()
    {
      window.event.returnValue = false;
      logEvent('');
    }
    function myOnDrop()
    {
      var dtT, dtU, cdT, cdU;
      var we = window.event;
    
      we.returnValue = false; 
    //  we.cancelBubble = true;
      
      dtU = we.dataTransfer.getData('URL');
      dtT = we.dataTransfer.getData('Text');
      
      cdU = window.clipboardData.getData('URL');
      cdT = window.clipboardData.getData('Text');
    
      logEvent('dtT: ' + dtT + '\ndtU: ' + dtU +
               '\ncdT: ' + cdT + '\ncdU: ' + cdU);
    
      return false;
    }
    function logEvent(msg)
    {
      var s = '', t = document.getElementById('ta');
      s = window.event.type + '\n' +
          window.event.srcElement.tagName + '\n' +
          msg + '\n--------------\n';
      t.value += s;
    }
    </script>
    </head>
    <body>
    <h1>IE ondrop Test</h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
    <form>
    <textarea id='ta'></textarea>
    <input type='reset' />
    </form>
    </body>
    </html>

  3. #3
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the reply,
    I have looked through the MS stuff, and it appears that you need to set the data using setData before you can use getData to retrieve it. Which seems a little odd, but in the context of all there examples it seems to relate to moving objects inside the browser window and not outside in.

    I am using IE by the way.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try my example code?

    You can select text, drag and drop it, and the drop event fires and the selected text is available from getData(). You only call setData() (from the source element) if you want to customize the data that is dragged. By default it will be the selected text.

    You can select text from a different browser window, drag and drop it on the original window, and the drop event fires and the selected text is available from getData().

    When you drag a file from Explorer and drop it on the browser, the drop event does fire - but getData() returns null.

    The docs at MSDN explain that even COM is supported by the dataTransfer object. But they also explain that the operation will fail if the two apps have different security models. If there is a solution, I think it will involve looking into this security issue.

  5. #5
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh I did try your code, and have read into the drag drop model from I.E. I will look into the security model, but whats the likelyhood of me being able to do this? Have you seen it anywhere before? Or am I going to have to create an ActiveX control (or something similar)?

    Thanks again

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Writing an ActiveX control would be a solution. But in either case you're going to have to require the user make certain security settings. If this is for an intranet then that may not be a problem.

    As for what security settings are required... I don't know . I tried several different things but none of them made any difference.

  7. #7
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks then for all your help and time, I will look into the ActiveX route.

    Cheers


Bookmarks

Posting Permissions

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