JSFiddle - React, Tailwind, and code Playground

by parikramatic

HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Simple draggable example</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <div class="content">
            <table>
                <tr>
                    <td>
                        <div class ="container">
                            <ul id="source">
                                <li id="draggable" class="ui-state-highlight">
                                    <div id="commandHolder" class="command">
                                            <div class="phrase">
                                                <select id="select3" name="select3">
                                                    <option value="" class="selected">execute</option>
                                                </select>
                                            </div>
                                    </div>
                                </li>
                            </ul>
                 
                            <ul id="sortable">
                                <li class="ui-state-default">Item 2</li>
                                <li class="ui-state-default">Item 3</li>
                                <li class="ui-state-default">Item 4</li>
                                <li class="ui-state-default">Item 5</li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

JavaScript

// Sorting and dragging handlers
                            $("#sortable").sortable({
                                revert: true,
                                cursor: "move",
                                start: function (event, ui) {
                                    $(ui.item).unbind('click');
                                },
                                stop: function (event, ui) {
                                    $(ui.item).attr('class', 'ui-state-default');
                                }
                            });

                            $("ul, li").disableSelection();

                            $("#draggable").draggable({
                                connectToSortable: "#sortable",
                                opacity: 0.8,
                                cursor: "move",
                                helper: function () {
                                    return $("<div>" + $(this).text() + "</div>");
                                },
                                distance: 20
                            });

                            $("#sortable").droppable({
                                drop: function (event, ui) {
                                    alert('dropped');
                                    $(ui.draggable).removeClass();
                                },
                                activeClass: "ui-state-hover",
                                hoverClass: "ui-state-active"
                            });