JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<div class="box-body" ng-app='App'>
    <div ng:controller="menuConfigCtrl">
         <h1>Menu Items</h1>

        <ul class='sortable' ui-sortable ng-model="menu">
            <li ng:repeat="item in menu | orderBy:'order'"class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{{item.Title}}</li>
        </ul>
    </div>
</div>

CSS

.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
.sortable li span { position: absolute; margin-left: -1.3em; }
.sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

JavaScript

/*
 jQuery UI Sortable plugin wrapper

 @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
*/
angular.module('ui.sortable', [])
    .value('uiSortableConfig', {})
    .directive('uiSortable', ['uiSortableConfig',

function (uiSortableConfig) {
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {

            function combineCallbacks(first, second) {
                if (second && (typeof second === "function")) {
                    return function (e, ui) {
                        first(e, ui);
                        second(e, ui);
                    };
                }
                return first;
            }

            var opts = {};

            var callbacks = {
                receive: null,
                remove: null,
                start: null,
                stop: null,
                update: null
            };

            angular.extend(opts, uiSortableConfig);

            if (ngModel) {

                ngModel.$render = function () {
                    $(element).sortable("refresh");
                };

                callbacks.start = function (e, ui) {
                    // Save position of dragged item
                    ui.item.sortable = {
                        index: ui.item.index()
                    };
                };

                callbacks.update = function (e, ui) {
                    // For some reason the reference to ngModel in stop() is wrong
                    ui.item.sortable.resort = ngModel;
                };

                callbacks.receive = function (e, ui) {
                    ui.item.sortable.relocate = true;
                    // added item to array into correct position and set up flag
                    ngModel.$modelValue.splice(ui.item.index(), 0, ui.item.sortable.moved);
                };

                callbacks.remove = function (e, ui) {
                    // copy data into item
                  ...