How to modify drag and drop behavior from a browser?

Question

Conventionally, if I click on a link on a browser and drag, the data that is 'fetched' is the URL and its name, and that can be used by the target application (MS Word or a Java Swing app).

I want to modify the default behavior of a browser on drag to include some more data.

One good application is dragging from a google search results page. For example, as shown in the diagram below, when I drag from anywhere in the first result area (marked in yellow), I want to capture not just the url of the page, but also all additional information (like the links for "Actions", "In Mac OS" links at the bottom of the first result).

---

I am not sure what I need to get this behavior. Javascript might be one solution I guess (maybe an extension that makes a javascript code run on all the pages that load?), but am not sure at all. Any pointers / tips / suggestions would be useful.

---

Answer 1

To enable drag and drop, simply add draggable="true" as an attribute on an element.

Example:

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

All drag events have a property called dataTransfer which is used to hold the drag data. dataTransfer contains two pieces of information, the data format(MIME) and the stored data. The information is set using event.dataTransfer.setData().

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

Here's an example that changes the drag and drop behavior.

Setup:

• Go to Google.com using Google Chrome.
• Search for anything, like "dog".
• Press F12 to open up the Dev console.
• Copy and Paste the content of jQuery in the console.
• Copy and Paste the content of Drag-N-Drop Script in the console.

Usage:

• Drag and drop a search result section from the web browser to a text editor, like wordpad.

Result:

• A collection of links should show up in your text editor. The links are markdown styled.

Drag-N-Drop Script

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

You should be able to create a Google Chrome extension that has this functionality for a set number of websites. Each site should have a different main() function. However, you might be able to create a general algorithm if you test against the top 100 sites.

• Info on Drag and Drop: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations
• dataTransfer Object: http://help.dottoro.com/ljvspfdo.php
• List of MIME: http://en.wikipedia.org/wiki/Internet_media_type