如何通过jQuery插件拖放链接/页面？

Question

嗨,我正在做一个关于创建jQuery UI的自我项目,允许用户将链接/网页(特别是维基百科的文章)拖放到像Solitaire中的堆栈这样的"组织者".我希望添加各种功能,例如当用户将Wikipage拖放到UI时,例如分组项目/卡片视觉效果.

我不确定从哪里开始,因为我对jQuery相对较新.是否可以从维基百科中拖动页面并将其放在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();
    }
};

原答案:

我能想到的唯一可能的解决方案是使用输入或textarea来获取已删除锚点的链接,因为输入和textarea接收删除链接的链接作为文本.

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/