首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何通过jQuery插件拖放链接/页面?

问如何通过jQuery插件拖放链接/页面?
EN

Stack Overflow用户
提问于 2011-03-20 22:09:00
回答 1查看 7.1K关注 0票数 7

嗨,我正在做一个关于创建jQuery用户界面的自我项目,允许用户拖放链接/网页,特别是从维基百科的文章到某种“组织者”,比如纸牌中的堆栈。我希望添加各种功能,如当用户拖拽维基页面到用户界面,如分组项目/卡片可视化。

我不知道该从哪里开始,因为我对jQuery还比较陌生。是否可以从维基百科中拖动页面并将其放到jQuery UI中?如果有人有任何建议的话,那就太棒了,因为我真的想弄清楚如何把这东西踢出地面。

编辑:有人吗?我还没找到任何线索。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-03-20 23:01:34

编辑2:

我用纯JS形式重写了它(也修复了一些问题)。

要点:https://gist.github.com/matt-curtis/9044134

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

代码:

代码语言:javascript
复制
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();
    }
};

原始答案:

我能想到的唯一可能的解决方案是做一些事情,使用输入或文本区域来获取被丢弃的锚点的链接,因为输入和文本区域以文本的形式接收删除链接的链接。

HTML:

给我一个链接!:)

联署材料:

$("body").bind("dragenter“)函数(){//当用户将链接拖到文档中时.).bind(“拖放拖放”,函数(){//当拖动移到文档外时.);setInterval(函数(){ if($("#link_grabber").val() != ""){ var val = $("#link_grabber").val();//获取新删除的链接$("#link_grabber").val("");//为下一个链接$(“##link_grabber>span”)设置//prep文本区域(“您的链接是:”+val;},100);​

我制作了一个jsFiddle,它演示了这个概念:http://jsfiddle.net/C8yAa/2/

编辑:还有一种HTML5方式来做这件事,检查一下:http://www.html5rocks.com/en/tutorials/dnd/basics/

票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5371873

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档