<!doctype html>
<html>
	<head>
		<title>Selection spanning hidden elements</title>
		<script type="text/javascript">
window.onload = function () {
  var range = document.createRange(), p = document.getElementsByTagName('p')[0];
  range.selectNodeContents(p);
  range.setStart(p.firstChild.firstChild,4);
  range.setEnd(p.lastChild.firstChild,5);
  window.getSelection().addRange(range);
};
		</script>
	</head>
	<body>

		<p><span style="display:none">FAILPASS_</span>drag<span style="display:none">_THIS_</span>text<span style="display:none">_PASSFAIL</span></p>
		<p><textarea rows="3" cols="50"></textarea></p>
		<p>Drag the selected text into the input box. The drag placeholder should match the visible text that is being dragged. When dropped, either &quot;dragtext&quot; or &quot;PASS_drag_THIS_text_PASS&quot; should appear in the input.</p>

	</body>
</html>