Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (54 sloc) 2.27 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-copy-drag-json-ld example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
</head>
<body class="container">
<h1><a href="https://github.com/tistre/js-copy-drag-json-ld">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="http://www.example.com" target="_blank"
ondragstart="setTransferDataOnDragStart(event)" draggable="true" onclick="copyTransferDataOnClick(event)"
data-transfer_json_ld_ref="data01">
<img src="link.svg" style="height: 20px; width: auto; padding-right: 5px;"/>
Copy link
</a>
button to copy JSON-LD data to the clipboard. <strong>Drag and drop</strong> it onto another Web page to transfer
JSON-LD
data.
</p>
<p>
You can also <strong>Shift+Click</strong> (Windows) or <strong>Command+Click</strong> (Mac) it to open the link in a new tab.
</p>
<p>
Source code for this page on Github: <a
href="https://github.com/tistre/js-copy-drag-json-ld/blob/master/example.html">example.html</a>
You can test it with <a href="dump-data.html">dump-data.html</a>.
</p>
<p>
<em>Credits:</em>
The example JSON-LD data is taken from Google’s <a
href="https://developers.google.com/search/docs/guides/intro-structured-data">
Introduction to Structured Data</a>.
The <a href="https://github.com/Microsoft/YamUI/blob/master/assets/icons/Link.svg">Link.svg</a> icon used in the
button is taken from Microsoft’s <a href="https://github.com/Microsoft/YamUI/">YamUI</a>.
</p>
<script type="application/ld+json" id="data01">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.example.com",
"name": "Unlimited Ball & Bearings Corp.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-401-555-1212",
"contactType": "Customer service"
}
}
</script>
<script src="copy-drag-json-ld.js"></script>
</body>
</html>