030.xhtml - mozsearch

Enable keyboard shortcuts

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

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

<head>

<title>SVG image drag and drop</title>

<style type="text/css">

div[ondragenter]

  {width:105px;

  min-height:105px;

  text-align:center;

  margin-top:20px;

  padding:10px;

  border:solid thin navy;}

p:first-child

  {padding-left:12px;}

</style>

<script type="application/ecmascript">

function addImage(event)

  {var c = document.createElement('img');

  c.setAttribute('src',event.dataTransfer.getData('text/uri-list'));

  document.querySelector('div').appendChild(c);}

</script>

</head>

<body>

<p><img src="030-1.svg" alt="SVG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p>

<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p>

<div

  ondragenter="event.preventDefault()"

  ondragover="return false"

  ondrop="addImage(event)"

/>

</body>

</html>