171.xhtml (1008B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Dragging text selection from scrollable container to block element</title> 5 <style type="text/css"> 6 div 7 {width:300px; 8 height:100px;} 9 div:first-child 10 {overflow-y:scroll;} 11 div[ondragenter] 12 {margin-top:20px; 13 padding:10px; 14 color:white; 15 background-color:navy;} 16 textarea 17 {width:300px; 18 height:100px;} 19 p+p 20 {margin-top:200px; 21 padding-bottom:50px;} 22 </style> 23 </head> 24 <body onload="window.getSelection().selectAllChildren(document.querySelector('p + p'))"> 25 <div> 26 <p> 27 Here is scrollable container with text selection at the end of it. 28 Drag selected text to the blue box. 29 Copy of selection should end up in the blue box once you drop it there. 30 </p> 31 <p>Try to drag this text.</p> 32 </div> 33 <div 34 ondragenter="event.preventDefault()" 35 ondragover="return false" 36 ondrop="document.querySelector('div + div').appendChild(document.createTextNode(event.dataTransfer.getData('text/plain')))" 37 /> 38 </body> 39 </html>