170.xhtml - mozsearch

Enable keyboard shortcuts

<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Dragging multiline text selection from scrolled textarea to block element</title>

<style type="text/css">

div[ondragenter]

  {width:300px;

  height:100px;

  margin-top:20px;

  padding:10px;

  color:white;

  background-color:navy;}

textarea

  {width:300px;

  height:100px;}

</style>

</head>

<body onload="var t = document.querySelector('textarea');t.select();t.setSelectionRange(163,185)">

<p>

<textarea>

Here is textarea with 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.

Try to drag this text.

</textarea>

</p>

<div

  ondragenter="event.preventDefault()"

  ondragover="return false"

  ondrop="document.querySelector('div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))"

/>

</body>

</html>