嗨,我正在做一个关于创建jQuery用户界面的自我项目,允许用户拖放链接/网页,特别是从维基百科的文章到某种“组织者”,比如纸牌中的堆栈。我希望添加各种功能,如当用户拖拽维基页面到用户界面,如分组项目/卡片可视化。
我不知道该从哪里开始,因为我对jQuery还比较陌生。是否可以从维基百科中拖动页面并将其放到jQuery UI中?如果有人有任何建议的话,那就太棒了,因为我真的想弄清楚如何把这东西踢出地面。
编辑:有人吗?我还没找到任何线索。
发布于 2011-03-20 23:01:34
编辑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();
}
};原始答案:
我能想到的唯一可能的解决方案是做一些事情,使用输入或文本区域来获取被丢弃的锚点的链接,因为输入和文本区域以文本的形式接收删除链接的链接。
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/
https://stackoverflow.com/questions/5371873
复制相似问题