Drag and drop URL, text, html, files,

[Matjaž Kljun]

Hi,

I'm porting a Firefox extension to Chrome. The extension is just a web page to which URLs, text, html and files can be dragged and dropped and than moved around (like on the desktop)

Is there a way that Chrome detects what has been dragged onto a page?

Similar to Firefox's:
https://developer.mozilla.org/en-US/docs/DragDrop/Recommended_Drag_Types

mkljun

[PhistucK]

I believe these tutorials can help you with that -

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd

http://www.html5rocks.com/en/tutorials/dnd/basics/

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/-/TAOaQA7ZdTgJ.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

[Matjaž Kljun]

Hi PhistucK,

Thank you for the tips. However I couldn't find if there is a way to detect the mime type being dragged. What I want if for example something like this

      var length = event.dataTransfer.items.length;
      for (var i = 0; i < length; i++) {
        var entry = event.dataTransfer.items[i].webkitGetAsEntry();
        if (entry.isFile) {
          $("msg").innerHTML += "-isFile-";
        } else if (entry.isDirectory) {
          $("msg").innerHTML += "-isFolder-";
        } else if (ENTRY MIME TYPE == "text/plain") {
          //
        } else if (ENTRY MIME TYPE == "text/hmtl") {
          //
        }
      }

For files and folders this works. What about other mime types? I looked at dataTransfer.getType but it doesn't seem to be doing thios. Or am I missing something?

m

On Friday, October 12, 2012 9:55:22 AM UTC+1, PhistucK wrote:

I believe these tutorials can help you with that -

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd

http://www.html5rocks.com/en/tutorials/dnd/basics/

☆PhistucK

On Fri, Oct 12, 2012 at 1:42 AM, Matjaž Kljun <mkl...@gmail.com> wrote:

Hi,

I'm porting a Firefox extension to Chrome. The extension is just a web page to which URLs, text, html and files can be dragged and dropped and than moved around (like on the desktop)

Is there a way that Chrome detects what has been dragged onto a page?

Similar to Firefox's:
https://developer.mozilla.org/en-US/docs/DragDrop/Recommended_Drag_Types

mkljun

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/-/TAOaQA7ZdTgJ.
To post to this group, send email to chromium-...@chromium.org.

To unsubscribe from this group, send email to chromium-extensions+unsub...@chromium.org.

[Matjaž Kljun]

Anyway ... I managed to get URLs. However, if I drag over plain text from any application, nothing happens

function doDrop(event) {
      event.stopPropagation();
      event.preventDefault();

      var length = event.dataTransfer.items.length;
      var beenIn = false;
      $("msg").innerHTML = '<ul>';

      for (var i = 0; i < length; i++) {

          if (event.dataTransfer.types[0] == "text/uri-list" && beenIn == false) {
              $("msg").innerHTML += '<li>' + entities(event.dataTransfer.getData("text/uri-list")) + '</li>';
              beenIn = true;
          } else if (event.dataTransfer.types[0] == "text/html" && beenIn == false) {
              $("msg").innerHTML += '<li>' + entities(event.dataTransfer.getData("text/html")) + '</li>';
              beenIn = true;
          } else if (event.dataTransfer.types[0] == "text/plain" && beenIn == false) {
              $("msg").innerHTML += '<li>' + entities(event.dataTransfer.getData("text/plain")) + '</li>';
              beenIn = true;
          } else if (event.dataTransfer.types[0] == "Files") {

              var entry = event.dataTransfer.items[i].webkitGetAsEntry();
              if (entry.isFile) {

              $("msg").innerHTML += '<li> -isFile-' + entry.fullPath + '</li>';;
            } else if (entry.isDirectory) {
              $("msg").innerHTML += '<li> -isFolder-' + entry.fullPath + '</li>';;
            }
          }
      }
      $("msg").innerHTML += '</ul>';
      beenIn = false;
}


I call this code on a body tag since all the page can take something dragged on:

<body id="body" ondrop="doDrop(event);">

I know it is possible to get plain text as from here http://html5demos.com/drag-anything. I looked at the code and I can't see what I'm missing.

Any help would be appreciated.

m

[rloewy]

In the dragover event, just log to the console the event's datatypes-  and you will be able to see exactly what data-types you need to catch and handle.

Once you have that, it is not an issue to rewrite your code to catch it.