JSFiddle - React, Tailwind, and code Playground

by termi

HTML

<table>
    <caption>table 1</caption>    
    <tbody>
        <tr draggable="true">
            <td>Потяни за меня. Не работает в webkit, точнее, ничего не отображается при перетаскивании</td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
        </tr>
        <tr>
            <td draggable="true">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
        </tr>
        <tr>
            <td>
                <div draggable="true">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</div>
            </td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
            <td>test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</td>
        </tr>
    </tbody>
</table>

<section style="display:table" class="table">
    <h1 style="display:table-caption">table 2</h1>
    <div style="display:table-row-group">
        <ul draggable="true" style="display:table-row" class="tr">
            <li style="display:table-cell"> Потяни за меня. Не работает в webkit, точнее, ничего не отображается при перетаскивании </li>
            <li style="display:table-cell">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</li>
            <li style="display:table-cell">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</li>
        </ul>
        <ul style="display:table-row" class="tr">
            <li draggable="true" style="display:table-cell">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</li>
            <li style="display:table-cell">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</li>
            <li style="display:table-cell">test test test etestsetsdjkahf aksjdhf kjashdjhfkajshf</li>
        </ul>
        <ul style="display:table-row" class="tr">
            <li...

CSS

table,
.table {
    border-collapse: separate;
    border-spacing: 4px;
}

tr,
.tr {
    background:gray;        
    
}
[draggable] {
    background: red;    
}

[draggable]:hover {
    background: green;    
}

JavaScript

Array.prototype.slice.call(document.querySelectorAll('[draggable=true]')).forEach(function(draggableNode) {
    draggableNode.addEventListener('dragstart', function(event) {
        if(!event.dataTransfer)return;

        /** @namespace event.dataTransfer https://developer.mozilla.org/En/DragDrop/DataTransfer */
        event.dataTransfer.effectAllowed = 'move';
        //browsers may populate the text/html data type for you,
        //but Firefox will not allow a drag without setting some data
        event.dataTransfer.setData("text", "");
    });
});