dropzone - HTML: Hypertext Markup Language
the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.
... specifications specification status comment html 5.1the definition of 'dropzone' in that specification.

DataTransferItem.webkitGetAsEntry() - Web APIs
html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
... #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...And 2 more matches

FileSystemDirectoryReader.readEntries() - Web APIs
html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
... #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
...And 2 more matches

Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; ...
...set the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as...
... link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.

Using files from web applications - Web APIs
} }; fd.append('myfile', file); // initiate a multipart/form-data upload xhr.send(fd); } window.onload = function() { const dropzone = document.getelementbyid("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stoppropagation(); event.preventdefault(); } dropzone.ondrop = function(event) { event.stoppropagation(); event.preventdefault(); const filesarray = event.datatransfer.files...
...; for (let i=0; i<filesarray.length; i++) { sendfile(filesarray[i]); } } } </script> </head> <body> <div> <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">drag & drop your file here...</div> </div> </body> </html> example: using object urls to display pdf object urls can be used for other things than just images!

HTMLElement - Web APIs
htmlelement.dropzone read only returns a domsettabletokenlist reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
... recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeylabel, draggable, dropzone, contenteditable, iscontenteditable, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties.

Global attributes - HTML: Hypertext Markup Language
dropzone an enumerated attribute indicating what types of content can be dropped on an element, using the drag and drop api.
...from html5, contextmenu, draggable, dropzone, and spellcheck have been added.

HTML attribute reference - HTML: Hypertext Markup Language
dropzone global attribute indicates that the element accepts the dropping of content onto it.

HTML documentation index - HTML: Hypertext Markup Language
16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.