JSFiddle - React, Tailwind, and code Playground

by chrisbenseler

HTML

<!DOCTYPE html>
<head>
    <title>Exemplo drop</title>
    <meta charset="utf-8">
</head>
<body>
<table>
<thead>
<tr>
    <th>Evento</th><th>suportado pelo browser?</th>
</tr>
</thead>
<tbody>
<tr>
    <td>dragenter</td>
    <td></td>
</tr>
<tr>
    <td>dragover</td>
    <td></td>
</tr>
<tr>
    <td>dragleave</td>
    <td></td>
</tr>
<tr>
    <td>drop</td>
    <td></td>
</tr>
</tbody>
</table>
</body>
</html>

CSS

table td, table th {
    width: 300px;
    text-align: center;
}
table th {
 font-weight: bold;   
}

JavaScript

function isEventSupported(eventName) {
        
        var element = document.createElement('div');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
            // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
            if ( !element.setAttribute ) {
                element = document.createElement('div');
            }
            if ( element.setAttribute && element.removeAttribute ) {
                element.setAttribute(eventName, '');
                isSupported = typeof element[eventName] == 'function';
                // If property was created, "remove it" (by setting value to `undefined`)
                if ( typeof element[eventName] != 'undefined' ) {
                    element[eventName] = undefined;
                }
                element.removeAttribute(eventName);
            }
        }

        element = null;
        return isSupported;
        

    }


$(document).ready(function() {
    $("table tbody tr").each(function() {
        var tds = $(this).children("td");
        var event_name = $(tds[0]).html();
        $(tds[1]).html(isEventSupported(event_name).toString());
    });
});