Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>js-copy-drag-json-ld example</title>
<link rel="stylesheet" href=""
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<body class="container">
<h1><a href="">js-copy-drag-json-ld</a> example</h1>
<p>A “Copy link” button which adds custom JSON-LD data to the clipboard and drag&amp;drop payload.</p>
<p><strong>Click</strong> this
<a class="btn btn-light" title="Click or drag to copy link" href="" target="_blank"
ondragstart="setTransferDataOnDragStart(event)" draggable="true" onclick="copyTransferDataOnClick(event)"
<img src="link.svg" style="height: 20px; width: auto; padding-right: 5px;"/>
Copy link
button to copy JSON-LD data to the clipboard. <strong>Drag and drop</strong> it onto another Web page to transfer
You can also <strong>Shift+Click</strong> (Windows) or <strong>Command+Click</strong> (Mac) it to open the link in a new tab.
Source code for this page on Github: <a
You can test it with <a href="dump-data.html">dump-data.html</a>.
The example JSON-LD data is taken from Google’s <a
Introduction to Structured Data</a>.
The <a href="">Link.svg</a> icon used in the
button is taken from Microsoft’s <a href="">YamUI</a>.
<script type="application/ld+json" id="data01">
"@context": "",
"@type": "Organization",
"url": "",
"name": "Unlimited Ball & Bearings Corp.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-401-555-1212",
"contactType": "Customer service"
<script src="copy-drag-json-ld.js"></script>