3

従来、ブラウザでリンクをクリックしてドラッグすると、「フェッチ」されるデータは URL とその名前であり、ターゲット アプリケーション (MS Word または Java Swing アプリ) で使用できます。

ドラッグ時のブラウザのデフォルトの動作を変更して、さらにデータを追加したいと考えています。

優れたアプリケーションの 1 つは、Google 検索結果ページからドラッグすることです。たとえば、下の図に示すように、最初の結果領域 (黄色でマーク) の任意の場所からドラッグすると、ページの URL だけでなく、すべての追加情報 (「アクション」のリンクなど) も取得したいと考えています。 」、「Mac OS の場合」のリンクは最初の結果の下部にあります)。

この動作を得るために何が必要かわかりません。Javascript は私が推測する 1 つの解決策かもしれません (ロードされるすべてのページで JavaScript コードを実行する拡張機能でしょうか?) が、まったくわかりません。ポインタ/ヒント/提案は役に立ちます。

ここに画像の説明を入力

4

1 に答える 1

5

draggable="true"ドラッグ アンド ドロップを有効にするには、要素に属性として追加するだけです。

例：

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

dataTransferすべてのドラッグ イベントには、ドラッグ データを保持するために使用される というプロパティがあります。dataTransferデータ形式(MIME)と格納データの2つの情報が含まれています。情報は を使用して設定されevent.dataTransfer.setData()ます。

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

ドラッグ アンド ドロップの動作を変更する例を次に示します。

設定：

  • Google Chrome を使用してGoogle.comにアクセスします。
  • 「犬」など、何でも検索してください。
  • を押しF12て開発コンソールを開きます。
  • jQueryの内容をコピーしてコンソールに貼り付けます。
  • Drag-N-Drop Scriptコンソールの内容をコピーして貼り付けます。

使用法：

  • 検索結果セクションを Web ブラウザーからワードパッドなどのテキスト エディターにドラッグ アンド ドロップします。

結果：

  • リンクのコレクションがテキスト エディターに表示されます。リンクはマークダウン スタイルです。

ドラッグ アンド ドロップ スクリプト

(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();
}());

一定数の Web サイトに対してこの機能を備えた Google Chrome 拡張機能を作成できるはずです。各サイトには異なるmain()機能が必要です。ただし、上位 100 のサイトに対してテストを行うと、一般的なアルゴリズムを作成できる場合があります。

于 2012-12-08T07:12:27.520 に答える