022.xhtml - mozsearch

Enable keyboard shortcuts

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

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

<head>

<title>Selection drag and drop: events after drag and drop is cancelled</title>

<style type="text/css">

div

  {width:0;

  height:0;

  border:solid 50px silver;

  border-radius:50px;}

</style>

<script type="application/ecmascript">

var result = true;

function selectText()

  {window.getSelection().selectAllChildren(document.querySelector('p'))}

function dropIt(event)

  {result = false;

  setColor('maroon');

  say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')}

function endDrag(event)

  {if(result)

    {setColor('teal')}

function say(it)

  {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}

function setColor(c)

  {document.querySelector('div').setAttribute('style','border-color:' + c)}

</script>

</head>

<body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)">

<p ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)">Drag me</p>

<p>Drag selected text and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p>

<div/>

<pre/>

</body>

</html>