如何在 jQuery 插件中拖放链接/页面？

Question

您好，我正在做一个关于创建 jQuery UI 的自我项目，以允许用户将链接/网页（特别是 Wikipedia 中的文章）拖放到类似于纸牌中的堆栈的“组织者”中。我希望添加各种功能，例如当用户将 Wikipage 拖放到 UI 时，例如分组项目/卡片视觉效果。

我不确定从哪里开始，因为我对 jQuery 比较陌生。是否可以从 Wikipedia 中拖动页面并将其放入 jQuery UI 中？如果有人有任何建议，那就太棒了，因为我真的想弄清楚如何把这件事踢到地上。

---

编辑：有人吗？我还没有找到任何东西。

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/