Question

Hi I’m doing a self-project on creating a jQuery UI to allow users to drag-n-drop links/webpages, specifically, articles from Wikipedia, to a sort of ‘organizer’ like the stacks in Solitaire. I’m hoping to add various features such as when the user drag-n-drops the Wikipage to the UI such as grouping items/card visuals.

I’m unsure where to start as I’m relatively new to jQuery. Is it possible to drag a page from Wikipedia and drop it in a jQuery UI? If anyone has any advice, that would be awesome as I’m really trying to figure out how to kick this thing off the ground.

---

Edit: Anyone? I’ve had no luck finding anything yet.

Answer 1

EDIT 2:

I rewrote this in pure JS form (also fixes some issues).

Gist: https://gist.github.com/matt-curtis/9044134

JSFiddle: http://jsfiddle.net/z9Y86/1/

Code:

var LinkGrabber = {
    textarea: null,

    /* Textarea Management */

    attach_ta: function(){
        if(LinkGrabber.textarea != null) return;

        var textarea = LinkGrabber.textarea = document.createElement("textarea");
        textarea.setAttribute("style", "position: fixed; width: 100%; margin: 0; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999");
        textarea.style.opacity = "0.000000000000000001";

        var body = document.getElementsByTagName("body")[0];
        body.appendChild(textarea);

        textarea.oninput = LinkGrabber.evt_got_link;
    },

    detach_ta: function(){
        if(LinkGrabber.textarea == null) return;
        var textarea = LinkGrabber.textarea;

        textarea.parentNode.removeChild(textarea);
        LinkGrabber.textarea = null;
    },

    /* Event Handlers */

    evt_drag_over: function(){
        LinkGrabber.attach_ta(); //Create TA overlay
    },

    evt_got_link: function(){
        /* THIS IS WHERE WE HANDLE THE RECEIVED LINK */

        var link = LinkGrabber.textarea.value;

        alert(link);

        LinkGrabber.detach_ta();
    },

    evt_drag_out: function(e){
        if(e.target == LinkGrabber.textarea) LinkGrabber.detach_ta();
    },

    /* Start/Stop */

    start: function(){
        document.addEventListener("dragover", LinkGrabber.evt_drag_over, false);
        document.addEventListener("dragenter", LinkGrabber.evt_drag_over, false);

        document.addEventListener("mouseup", LinkGrabber.evt_drag_out, false);
        document.addEventListener("dragleave", LinkGrabber.evt_drag_out, false);
    },

    stop: function(){
        document.removeEventListener("dragover", LinkGrabber.evt_drag_over);
        document.removeEventListener("dragenter", LinkGrabber.evt_drag_over);

        document.removeEventListener("mouseup", LinkGrabber.evt_drag_out);
        document.removeEventListener("dragleave", LinkGrabber.evt_drag_out);

        LinkGrabber.detach_ta();
    }
};

Original Answer:

The only POSSIBLE solution I can think of is to do something that uses
an input or textarea to get the link of the dropped anchor, because
inputs and textarea(s) receive the links of dropped links as text.

HTML:

<textarea id="link_grabber"></textarea>
<div id="notice">Drop a link on me! :)</div>

JS:

$("body").bind("dragenter dragover", function(){
    //When the user has dragged a link into the document...
}).bind("dragleave dragexit", function(){
    //When the drag is moved outside the document...
});

setInterval(function(){
    if($("#link_grabber").val() != ""){
        var val = $("#link_grabber").val(); //Get the newly dropped link
        $("#link_grabber").val(""); //prep textarea for the next link
        $("#notice > span").text("Your link is: "+val);
    }
}, 100);​

I made a jsFiddle that demonstrates the concept:
http://jsfiddle.net/C8yAa/2/

EDIT: There is also an HTML5 way of doing this, check this out: http://www.html5rocks.com/en/tutorials/dnd/basics/