JSFiddle - React, Tailwind, and code Playground

HTML

<section>
		<h2>Sortable Grid</h2>
    
    
    <ul class="sortable grid">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>
	</section>

CSS

header, section {
			display: block;
		}
		body {
			font-family: 'Droid Serif';
		}
		h1, h2 {
			text-align: center;
			font-weight: normal;
		}
		#features {
			margin: auto;
			width: 460px;
			font-size: 0.9em;
		}
		.connected, .sortable, .exclude, .handles {
			margin: auto;
			padding: 0;
			width: 555px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.sortable.grid {
			overflow: hidden;
		}
		.connected li, .sortable li, .exclude li, .handles li {
			list-style: none;
			border: 1px solid #CCC;
			background: #F6F6F6;
			font-family: "Tahoma";
			color: #1C94C4;
			margin: 5px;
			padding: 5px;
			height: 22px;
		}
		.handles span {
			cursor: move;
		}
		li.disabled {
			opacity: 0.5;
		}
		.sortable.grid li {
			line-height: 80px;
			float: left;
			width: 254px;
			height: 80px;
			text-align: center;
		}

		li.highlight {
			background: #FEE25F;
		}
		#connected {
			width: 440px;
			overflow: hidden;
			margin: auto;
		}
		.connected {
			float: left;
			width: 200px;
		}
		.connected.no2 {
			float: right;
		}
		li.sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
		}


.firstCol{
    clear: left;          
}

JavaScript

/*
* HTML5 Sortable jQuery Plugin
* http://farhadi.ir/projects/html5sortable
* 
* Copyright 2012, Ali Farhadi
* Released under the MIT license.
*/ (function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
        var method = String(options);
        options = $.extend({
            connectWith: false,
            onStartDrag: function(){},
            onEndDrag: function(){},
            onChangeOrder:  function(){}
        }, options);
        return this.each(function() {
            if (/^enable|disable|destroy$/.test(method)) {
                var items = $(this)
                    .children($(this)
                    .data('items'))
                    .attr('draggable', method == 'enable');
                if (method == 'destroy') {
                    items.add(this)
                        .removeData('connectWith items')
                        .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
                }
                return;
            }
            var isHandle, index, items = $(this)
                .children(options.items);
            var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
            items.find(options.handle)
                .mousedown(function() {
                isHandle = true;
            })
                .mouseup(function() {
                isHandle = false;
            });
            $(this)
                .data('items', options.items)
            placeholders = placeholders.add(placeholder);
            if (options.connectWith) {
                $(options.connectWith)
                    .add(this)
                    .data('connectWith', options.connectWith);
            }
            items.attr('draggable', 'true')
                .on('dragstart.h5s', function(e) {
                if (options.handle && !isHandle) {
                    return false;
                }
              ...