<?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dropzone and link drag and drop: allowed effects 'copy','copyMove','copyLink' and 'all'</title> <style type="text/css"> div {background-color:gray; width:200px; height:200px;} </style> <script type="application/ecmascript"> var effects = ['copy','copyMove','copyLink','all']; function start(event) {var e = parseInt(event.target.href.substring(16)); event.dataTransfer.effectAllowed = effects[e];} function finish(event) {var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17)); document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';} </script> </head> <body> <p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p> <p ondragstart="start(event)"> <a href="data:text/plain,0">Link</a> <a href="data:text/plain,1">Link</a> <a href="data:text/plain,2">Link</a> <a href="data:text/plain,3">Link</a> </p> <div dropzone="copy string:text/uri-list" ondrop="finish(event)"/> </body> </html>