如何修改浏览器的拖放行为？

Question

传统上,如果我单击浏览器上的链接并拖动,则"获取"的数据是URL及其名称,并且可以由目标应用程序(MS Word或Java Swing应用程序)使用.

我想在拖动时修改浏览器的默认行为以包含更多数据.

一个很好的应用是从谷歌搜索结果页面拖动.例如,如下图所示,当我从第一个结果区域(以黄色标记)的任何位置拖动时,我不仅要捕获页面的URL,还要捕获所有其他信息(如"Actions"的链接) ","在Mac OS中"链接在第一个结果的底部).

---

我不确定我需要得到这种行为.Javascript可能是我猜的一个解决方案(可能是一个扩展,使得javascript代码在所有加载的页面上运行？),但我根本不确定.任何指针/提示/建议都会很有用.

---

Answer 1

要启用拖放,只需draggable="true"在元素上添加属性即可.

例:

<div draggable="true">Little brother</div>

所有拖动事件都有一个名为的属性dataTransfer,用于保存拖动数据.dataTransfer包含两条信息,数据格式(MIME)和存储的数据.使用设置信息event.dataTransfer.setData().

event.dataTransfer.setData("text/plain", "Text to drag");

这是一个更改拖放行为的示例.

建立:

• 使用Google Chrome 访问Google.com.
• 搜索任何东西,比如"狗".
• 按下F12以打开开发控制台.
• 在控制台中复制并粘贴jQuery的内容.
• 复制并粘贴Drag-N-Drop Script控制台中的内容.

用法:

• 将搜索结果部分从Web浏览器拖放到文本编辑器(如wordpad).

结果:

• 链接集合应显示在文本编辑器中.这些链接是降价式的.

拖拽N-Drop脚本

(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()功能.但是,如果您针对前100个站点进行测试,则可以创建常规算法.

• 有关拖放的信息:https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations
• dataTransfer对象:http://help.dottoro.com/ljvspfdo.php
• MIME列表:http://en.wikipedia.org/wiki/Internet_media_type