Drag and Drop a URL into a browser and process usi

Question

I need the ability to drag and drop a URL (from the url bar in a browser) into a web page, make a request to a web service using that link, and take the JSON reply and populate a form.

I have been able to create the web service that processes the link, and I have been able to use jQuery.ajax to make requests, but I am unsure as to how to interact with a dropped link.

Can anyone point me to an example of this? What should I use?

Edit:

I have been able to fire off my ajax query using "drop", but I am unsure about how to get the value of the URL that I have dropped. Here is my code:

jQuery(function() {
$("input").bind("drop", function(e){
        var val = e.dataTransfer.getData('Text')
        $.ajax({
        type: 'GET',
        url: 'http://dev.null:8888/gud/',
        data: 'url=' + val,
        dataType: 'json',
        success: function(jsonData) {
          alert(jsonData);
        },
        error: function (xhr, ajaxOptions, thrownError){
          alert("this isnt working");
        },                              
      });
    });
  });

I thought that e.dataTransfer.getData('Text') would let me access the URL's value, but it doesn't. Does anyone know how I can access that value?

Found it. It is e.originalEvent.dataTransfer.getData('Text')

Answer 1

I think for your case you have to create a plugin or extension for the browser.

As soon as you drop the url to the browser address element, the page gets loaded and your JavaScript won't run.

Answer 2

Interesting question. I believe that this is possible; However I do think that there is a possibility for some limitations.

As far as I know, most platforms/browsers behave in a similar manner with regard to dragging and dropping text content (be it raw text, url's, "fish and chips", etc...) As soon as you "drop" some text into a textbox, the textbox will be populated with that content. So you could instruct your users to drop the link/text on to a specific textarea...

With regard to detecting when the drop occurs I think you will have to rely on a setInterval method checking the value/contents of a certain textbox to know when a valid URL has been inserted.

---

* Now with regard to the limitations - I don't know (off the top of my head) if this functionality is indeed universal, but I do believe that this is a standard feature of all the "major" browsers and it does not involve the platform.

*_{Would love to get some confirmation on this from a more learned individual.}