Source code

Revision control

Other Tools

<?xml version="1.0" encoding="utf-8"?>
<head>
<title>Dragging text selection from scrollable container to block element</title>
<style type="text/css">
div
{width:300px;
height:100px;}
div:first-child
{overflow-y:scroll;}
div[ondragenter]
{margin-top:20px;
padding:10px;
color:white;
background-color:navy;}
textarea
{width:300px;
height:100px;}
p+p
{margin-top:200px;
padding-bottom:50px;}
</style>
</head>
<body onload="window.getSelection().selectAllChildren(document.querySelector('p + p'))">
<div>
<p>
Here is scrollable container with text selection at the end of it.
Drag selected text to the blue box.
Copy of selection should end up in the blue box once you drop it there.
</p>
<p>Try to drag this text.</p>
</div>
<div
ondragenter="event.preventDefault()"
ondragover="return false"
ondrop="document.querySelector('div + div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))"
/>
</body>
</html>