Menu
I'm trying to detect the HTML5 Drag And Drop support in JavaScript. Modernizr seems to not handle this test case.
384
Complete HTML/CSS Course 2022 Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.
The HTML Drag and Drop API relies on the DOM's event model to get information on what is being dragged or dropped and to update that element on drag or drop. With JavaScript event handlers, you can turn any element into a draggable item or an item that can be dropped into.
Most areas of a web page or application are not valid places to drop data. Thus, the default handling of these events is not to allow a drop. Calling the preventDefault() method during both a dragenter and dragover event will indicate that a drop is allowed at that location.
HTML Drag and Drop (DnD) is a feature of HTML5. It is a powerful user interface concept which is used to copy, reorder and delete items with the help of mouse. You can hold the mouse button down over an element and drag it to another location. If you want to drop the element there, just release the mouse button.
You can do this:
if('draggable' in document.createElement('span')) { alert("Drag support detected"); } You can see a quick demo test using the above check here.
Also, there's a nice feature detection (not browser detection, yay!) list that's fairly well maintained here in case you're looking for other HTML5 features as well.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
