How to drag links / pages using jQuery plugin?

Question

Hi, I’m doing an independent project to create a jQuery user interface to allow users to drag links / web pages, in particular Wikipedia articles, into a kind of “organizer”, for example, in Solitaire. I hope to add various functions, for example, when a user drags Wikipedia into the user interface, for example, groups elements / videos.

I'm not sure where to start since I'm relatively new to jQuery. Can I drag a page from Wikipedia and drop it in the jQuery user interface? If anyone has any advice, that would be awesome as I am really trying to figure out how to hit this thing off the ground.

---

Edit: anyone? I still have not managed to find anything.

Answer 1

EDIT 2:

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

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

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

the 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 text field to get the link of the dropped anchor, because the inputs and text fields get the links of the 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 jsFiddle which demonstrates the concept: http://jsfiddle.net/C8yAa/2/

: HTML5 , : http://www.html5rocks.com/en/tutorials/dnd/basics/ p >