Как перетаскивать ссылки / страницы через плагин jQuery?

Question

Здравствуйте, я делаю самопроект по созданию пользовательского интерфейса jQuery, чтобы пользователи могли перетаскивать ссылки / веб-страницы, в частности, статьи из Википедии, в своего рода «органайзер», такой как стеки в Solitaire.Я надеюсь добавить различные функции, например, когда пользователь перетаскивает Wikipage в пользовательский интерфейс, например группирование элементов / визуальных элементов карты.

Я не уверен, с чего начать, поскольку я относительно новичокв JQuery.Можно ли перетащить страницу из Википедии и поместить ее в пользовательский интерфейс jQuery?Если у кого-нибудь есть какой-нибудь совет, это было бы замечательно, поскольку я действительно пытаюсь понять, как скинуть эту штуку с земли.

---

Редактировать: Кто-нибудь?Мне пока не повезло найти что-либо.

Answer 1

РЕДАКТИРОВАТЬ 2:

Я переписал это в чистом виде JS (также исправляет некоторые проблемы).

Суть: https://gist.github.com/matt-curtis/9044134

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

Код:

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();
    }
};

Оригинальный ответ:

Единственное ВОЗМОЖНОЕ решение, о котором я могу подумать, - это сделать что-то, что использует вход или текстовое поле, чтобы получить ссылку отброшенного якоря, потому что input и textarea (s) получают ссылки отброшенных ссылок в виде текста.

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);​

Я сделал jsFiddle, который демонстрирует концепцию: http://jsfiddle.net/C8yAa/2/

РЕДАКТИРОВАТЬ: Существует также способ HTML5 сделать это, проверьте это: http://www.html5rocks.com/en/tutorials/dnd/basics/