Dactyloidae/testing/web-platform/tests/html/editing/dnd/images/005.xhtml

32 lines
8.3 KiB
HTML
Raw Normal View History

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JPG 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').replace(/\r\n$/,''));
document.querySelector('div').appendChild(c);}
</script>
</head>
<body>
<p><img src="data:image/jpeg;base64,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
<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>