JSFiddle - React, Tailwind, and code Playground

by Trisox

JavaScript

// global dialog settings
(function( $ ){
  $.fn.globalDialogSettings = function() {
        this.dialog({
            autoOpen: false,
            show: "fade",
            hide: "fade",
            modal: true,
            resizable: false,
            draggable: false,
            width: 550,
            bgiframe: true,
            closeOnEscape: true,
        close: function() { },
        open: function() {
        }
    });
  };
})( jQuery );

// alert dialog settings
(function( $ ){
  $.fn.alertDialogSettings = function() {
        this.dialog({
            autoOpen: true,
            show: "fade",
            hide: "fade",
            modal: true,
            resizable: false,
            draggable: false,
            width: 350,
            bgiframe: true,
            closeOnEscape: true,
        close: function() { },
        open: function() {
        }
    });
  };
})( jQuery );

$(function() {
/*begin enabelen jquery ui sortable*/
// sortable taglabels binnengekomen
    var $sortableOrderIncoming = $("#sortableOrderIncoming");

    $sortableOrderIncoming.sortable({
        placeholder: "ui-state-highlight",
        update: function(event, ui) {
            alert('moved now submit form and refresh list!');
        }
    });
    $sortableOrderIncoming.disableSelection();

// sortable taglabels bewerking
    var $sortableOrderInOperation = $("#sortableOrderInOperation");

    $sortableOrderInOperation.sortable({
        placeholder: "ui-state-highlight",
        update: function(event, ui) {
            alert('moved now submit form and refresh list!');
        }
    });
    $sortableOrderInOperation.disableSelection();

// sortable taglabels afgehandeld niet ingeslagen
    var $sortableOrderHandled = $("#sortableOrderHandled");

    $sortableOrderHandled.sortable({
        placeholder: "ui-state-highlight",
        update: function(event, ui) {
            alert('moved now submit form and refresh list!');
        }
    });
   ...