Skip to content

Instantly share code, notes, and snippets.

@ibukanov

ibukanov/drop-of-text-with-url.html

Created September 2, 2019 12:38
Show Gist options
  • Save ibukanov/4b700024b95fdd2a50ddbecfb73c8de7 to your computer and use it in GitHub Desktop.
Save ibukanov/4b700024b95fdd2a50ddbecfb73c8de7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drop-of-text-with-url.html
<!DOCTYPE html>
<html>
<head>
<title>Selection drag and drop from url input to block element</title>
<style type="text/css">
p:first-child
{border:solid 2px #c31860;}
input
{border:solid 2px #D2B48C;}
div
{width:300px;
height:100px;
margin-top:20px;
padding:10px;
color:white;
background-color:#4682B4;}
</style>
</head>
<body onload="document.querySelector('input').select()">
<p>Drag selection to the box below. Box should turn green.</p>
<p><input type="url" value="https://w3.org"/></p>
<div
ondragenter="event.preventDefault()"
ondragover="return false"
ondrop="if(event.dataTransfer.getData('text/plain') == 'https://w3.org'){this.setAttribute('style','background-color:#228B22')}"
/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment