<!doctype html>
<html>
	<head>
		<title>Draggable textarea</title>
		<style type="text/css">
textarea { border: 1px solid orange; border-top-width: 20px; }
		</style>
		<script type="text/javascript">
window.onload = function () {
	document.getElementsByTagName('textarea')[0].ondragstart = function (e) {
		e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('Text', 'dummy text');
	};
};
		</script>
	</head>
	<body>

		<p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p>
		<div>
<textarea rows="5" cols="50" wrap="off">Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
		</div>

	</body>
</html>