JSFiddle - React, Tailwind, and code Playground

by stefuniv

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<p class="explain">The helper from the draggable object is added to the table "Sortable", not the draggable item itself.</p>

<div id="divdrag" style="float:right; margin-right:3em;">
    <table>
        <thead>
            <tr>
                <th colspan="2">Draggable</th>
            </tr>
        </thead>
        <tbody id="bodydrag">
            <tr data-id="3">
                <td>handle here</td>
                <td>line3</td>
            </tr>
            <tr data-id="4">
                <td>handle here</td>
                <td>line4</td>
            </tr>
        </tbody>
    </table>
</div>

<div id="divsort">
    <table style="">
        <thead>
            <tr>
                <th colspan="2">Sortable</th>
            </tr>
        </thead>
        <tbody id="bodysort">
            <tr data-id="1">
                <td class="handle">handle here</td>
                <td>line1</td>
            </tr>
            <tr data-id="2">
                <td class="handle">handle here</td>
                <td>line2</td>
            </tr>
        </tbody>
    </table>
</div>

<div id="result"><p style="color:blue">Attribute "data-id" from line3 isn't added to helper, line4's data-id is.</p>Result:</div>

CSS

table {
    border-collapse: collapse;
    display: table;
}
th, td {
    border: 1px solid gray;
    padding:0.5em;
}
#result {
    margin:2em auto;
}
.tr-placeholder {
    border-width: 2px !important;
    border-color: red !important;
    margin: 1em !important;
    height: 2em !important;
}

.explain {
    color:blue;
    font-weight:bold;
    margin-bottom:3em;
}

.handle {
    cursur:move;
}

JavaScript

$("#bodysort").sortable({
    placeholder: "tr-placeholder",
    handle: ".handle",
    revert: true,
    cursor: "ns-resize",
    axis: "y",
    receive: function (e, ui) {
        $("#result").append("<br>receive => ui.item.data-id =" + ui.item.attr('data-id'));
    },
    update: function (e, ui) {
        $("#result").append("<br>update => ui.item.data-id =" + ui.item.attr('data-id'));
    }
});

$("#bodydrag").children("tr[data-id]").draggable({
    connectToSortable: "#bodysort",
    helper: function () {
        if ($(this).attr('data-id')==3) return $("<div></div>").css({"color": "red", "background-color": "white"}).append($(this).children('td').eq(1).html());
        else return $("<div></div>").css({"color": "red", "background-color": "white"}).attr("data-id",$(this).attr('data-id')).append($(this).children('td').eq(1).html());
    },
    revert: "invalid"
});