JSFiddle - React, Tailwind, and code Playground

by sectioni

HTML

<div class="dashboard-container DashboardEditMode edit"><div class="dashboard structureID_3"><div class="row" data-hash="0"><div class="column col-md-4 ui-sortable" data-hash="0,0"><div guid="f310ff49-46ca-1282-0017-1ba56f8ffa25" wgtindex="wgt-0" class="panel-widget panel-default"><div class="panel-heading clearfix ui-sortable-handle" style="cursor: move;"><h3 class="h3 wgt-title"><span class="jq-wgt-title" title="Devices Compliance by Device-Property">Devices Compliance by Device-Property</span><span class="pull-right"><a edit="false" title="Reload widget" class="wgt-refresh hide"><img alt="refresh" src="/assets/images/2017/common/refresh.svg"></a><a edit="false" class="wgt-export hide"><img alt="export" src="/assets/images/2017/common/export.svg"></a><a edit="true" title="Edit widget" class="wgt-cog"><span>Edit</span></a><a edit="true" title="Remove widget" class="wgt-remove"><img alt="remove" src="/assets/images/2017/common/remove.svg"></a></span><div style="clear:both;"></div></h3></div><div class="wgt-body-wrapper ui-sortable-handle" style="cursor: move; position: static;"><div class="panel-body-widget collapse in"><div class="wgt-DevicesCompliancebyDeviceProperty widgetContainer">    
    <div class="jq-wgt-place" data-highcharts-chart="22"><div id="highcharts-k9e4irq-80" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 602px; height: 471px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="602" height="471" viewBox="0 0 602 471"><desc>Created with Highcharts 6.1.1</desc><defs><clipPath id="highcharts-k9e4irq-81"><rect x="0" y="0" width="518" height="346" fill="none"></rect></clipPath></defs><rect fill="none" class="highcharts-background" x="0" y="0"...

JavaScript

var settings = {
            columns: ".DashboardEditMode div.column:not('.notdrop')",
            widgetSelector: ".DashboardEditMode div[guid]",
            zIndex: helper.getMaxZindex() + 5,
            handleSelector: ".wgt-body-wrapper, .panel-heading",
            /*contentSelector: ".panel-widget"*/
        };
        var WGT = DashboardWidgets;

        var $sortableItems = $(settings.widgetSelector);

        $sortableItems.find(settings.handleSelector).css({
            cursor: "move"
        });

        $(settings.columns).sortable({
            items: $sortableItems,
            connectWith: $(settings.columns),
            handle: settings.handleSelector,
            placeholder: "wgt-placeholder",
            forcePlaceholderSize: false,
            zIndex: settings.zIndex,
            revert: 300,
            delay: 100,
            opacity: 1,
            containment: false,
            cursor: 'move',
            dropOnEmpty: true,
            scrollSensitivity: 100,
            scrollSpeed: 10,
            tolerance: 'pointer',
            start: function (e, ui) {                
                //$(ui.helper).addClass("dragging");         
            },
            stop: function (e, ui) {
                
                $(ui.item).css({
                    width: ""
                }).removeClass("dragging");
                //$(ui.helper).css('backgroundColor', '#F3F4F5');

                //$(settings.columns).sortable("enable");

                // If widget has a property "reloaded" and it in true
                if ($(ui.item).data("curData").reloaded) {

                    // Get Current widget data
                    var Widget = $(ui.item).data("widget");
                    // Find new widget in edit mode dashboard
                    var $panelWidget = $("div[guid='" + Widget.guid + "']", ".DashboardEditMode");
                    // Clean parent wrapper
                    $panelWidget.find(".panel-body-widget").html("");

   ...