通常,如果我在浏览器上单击链接并拖动,“获取”的数据是 URL 及其名称,目标应用程序(MS Word 或 Java Swing 应用程序)可以使用这些数据。
我想修改浏览器拖动时的默认行为以包含更多数据。
一个很好的应用程序是从谷歌搜索结果页面拖动。例如,如下图所示,当我从第一个结果区域(标记为黄色)的任意位置拖动时,我不仅要捕获页面的 url,还要捕获所有附加信息(例如第一个结果底部的“操作”链接、“在 Mac OS 中”链接)。
我不确定我需要什么才能获得这种行为。 Javascript 可能是我猜想的一种解决方案(也许是使 javascript 代码在所有加载的页面上运行的扩展?),但我完全不确定。任何指示/提示/建议都会有用。
最佳答案
要启用拖放,只需将 draggable="true"
添加为元素的属性即可。
例子:
<div draggable="true">Little brother</div>
所有拖动事件都有一个名为 dataTransfer
的属性,用于保存拖动数据。 dataTransfer
包含两条信息,数据格式(MIME)和存储的数据。使用 event.dataTransfer.setData()
设置信息。
event.dataTransfer.setData("text/plain", "Text to drag");
这是一个改变拖放行为的例子。
设置:
- 转到 Google.com使用谷歌浏览器。
- 搜索任何内容,例如“狗”。
- 按 F12 打开开发控制台。
- 复制并粘贴 jQuery 的内容在控制台中。
- 在控制台中复制并粘贴
Drag-N-Drop Script
的内容。
用法:
- 将搜索结果部分从网络浏览器拖放到文本编辑器(如写字板)中。
结果:
- 一组链接应该显示在您的文本编辑器中。链接采用 Markdown 样式。
拖放脚本
(function () {
// @author Larry Battle (http://bateru.com/news) 12.07.2012
var URLS = {
JQUERY : "http://code.jquery.com/jquery-1.8.3.min.js"
};
var SELECTORS = {
GOOGLE_LINK_SECTIONS : ".g"
};
var getNameAndURLFromLinks = function (el) {
var info = ["Links:\n"];
$(el).find("a").each(function () {
var url = $(this).attr("href");
if (/https?:\/\//.test(url)) {
info.push( "- [" + $(this).text() + "](" + url + ")");
}
});
return info.join("\n");
};
var storeDataInEvent = function (evt) {
var info = getNameAndURLFromLinks($(this));
event.dataTransfer.setData('text/plain', info);
};
var main = function () {
$(SELECTORS.GOOGLE_LINK_SECTIONS)
.attr("draggable", true)
.css("border", "3px orange solid")
.bind("dragstart", storeDataInEvent);
};
if(!window.jQuery){
window.alert("Paste the source of jQuery in the console and then run this script again. URL:" + URLS.JQUERY);
}else if(!/search/.test(document.location.href)){
window.alert("Google for something, then run this script in the console again.");
}
main();
}());
您应该能够为一定数量的网站创建具有此功能的 Google Chrome 扩展程序。每个站点都应该有不同的 main()
函数。但是,如果您针对 top 100 sites 进行测试,您也许能够创建通用算法。 .
关于javascript - 如何从浏览器修改拖放行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13718241/