如何从浏览器修改拖放行为？答案

【问题标题】：How to modify drag and drop behavior from a browser?如何从浏览器修改拖放行为？
【发布时间】：2012-12-05 07:23:38
【问题描述】：

通常，如果我单击浏览器上的链接并拖动，“获取”的数据是 URL 及其名称，目标应用程序（MS Word 或 Java Swing 应用程序）可以使用这些数据。

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

一个很好的应用程序是从谷歌搜索结果页面拖动。例如，如下图所示，当我从第一个结果区域（标记为 yellow）的任意位置拖动时，我不仅要捕获页面的 url，还要捕获所有附加信息（例如第一个结果底部的“Actions”、“In Mac OS”链接）。

我不确定我需要什么才能获得这种行为。我猜 Javascript 可能是一种解决方案（也许是一个扩展，可以让 javascript 代码在所有加载的页面上运行？），但完全不确定。任何指针/提示/建议都会很有用。

【问题讨论】：

在鼠标拖动/鼠标按下时选择相关文本怎么样？
@Jan：不，那不好。我不希望用户担心什么可以拖动，什么不可以拖动。我的应用程序（将使用捕获的数据）将使用数据，最好根据捕获的内容等抽象出应用程序的内部工作。
我认为要更改拖放行为，您需要将其包含在来自 Google 的原始标记中。我最初的想法可能不是您想要在您的应用程序中嵌入一个浏览器窗口，这样您就可以更改 HTML 或解析它以提取其他数据。
这适用于任何网站还是仅适用于 google.com？
@LarryBattle：google.com 只是一个例子。我想为一组页面启用此功能。

标签： javascript google-chrome drag-and-drop

【解决方案1】：

要启用拖放功能，只需将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的内容复制粘贴到控制台中。

用法：

将搜索结果部分从 Web 浏览器拖放到文本编辑器，例如写字板。

结果：

您的文本编辑器中应该会显示一组链接。链接采用 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 进行测试，您或许能够创建一个通用算法。

拖放信息：https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations
数据传输对象：http://help.dottoro.com/ljvspfdo.php
MIME 列表：http://en.wikipedia.org/wiki/Internet_media_type

【讨论】：