JSFiddle - React, Tailwind, and code Playground

by gasp10

HTML

<body>
    
    <div class="wrap">
        
        <ul id="draggable" class="items">
            
            <li class="to-drag">
                <h1>1</h1>
                <p>Day</p>
            </li>
            
            <li class="to-drag">
                <h1>2</h1>
                <p>Day</p>
            </li>
            
            <li class="to-drag">
                <h1>3</h1>
                <p>Day</p>
            </li>
            
            <li class="to-drag">
                <h1>4</h1>
                <p>Day</p>
            </li>
            
            <li class="to-drag">
                <h1>5</h1>
                <p>Day</p>
            </li>				
            
            <li class="new-day" class="items">
                <h1>+</h1>
                <p>Add another day</p>
            </li>
            
        </ul>
        
        <div style="height: 100px; clear: both;"></div>
        
        <ul id="dropzone">
            
            <li class="placeholder"></li>
            <li class="placeholder"></li>
            <li class="placeholder"></li>
            <li class="placeholder"></li>
            
        </ul>
        
    </div>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
</body>

CSS

body {
	padding: 0;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

ul#draggable, ul#dropzone {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

ul#draggable li.to-drag {
	background-color: #d1d1d1;
	border: 2px solid #909090;
	cursor: move;
	float: left;
	height: 150px;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
}

ul#draggable li.new-day {
	background-color: #d1d1d1;
	border: 2px solid #909090;
	cursor: pointer;
	float: left;
	height: 150px;
	margin-right: 10px;
	text-align: center;
	width: 200px;
}

ul#draggable li.new-day:hover {
	background-color: #e5e5e5;
	border: 2px solid #a1a1a1;
}

ul#dropzone li.placeholder {
	border: 2px dashed #c1c1c1;
	cursor: move;
	float: left;
	height: 100px;
	margin-right: 10px;
	text-align: center;
	width: 100px;
}

.correct {
	background-color: #44871f !important;
	border: 2px solid #44871f !important;
}

.active {
	background-color: #efefef;
	border: 1px solid #000000;
}

.to-drop {
	background-color: #fefefe;
	border: 2px solid #44871f;
}

span.remove {
	color: #a70000;
	cursor: pointer;
	display: block;
}

span.remove:hover {
	color: #ff0000;
}

span.suggest {
	color: #55eeee;
	cursor: pointer;
	display: block;
}

span.suggest:hover {
	color: #999eee;
}

JavaScript

$(function() {

	init();

	function init () {

		sorting();
		dragging();
		dropping();

	}

	$("#draggable li.new-day").click(function() {

		$("ul#draggable li.to-drag").last().after('<li class="to-drag ui-draggable ui-draggable-helper" data-id="101" data-order=""><h1>?</h1><p>Suggest day</p></li>');

		init();

	});

	function resize (event, ui) {

		ui.helper.css({ height: "100px", width: "100px" });

	}

	function sorting () {

		$("#dropzone").sortable({

			revert: true,
			opacity: 0.7,

			stop: function (event, ui) {

				// alert(ui.item.index());

			}

			// update function

		});

	}

	function dragging () {

		$("#draggable li.to-drag").draggable({

			connectToSortable: ".items",
			helper: "clone",
			revert: false,
			opacity: 0.5,
			cursorAt: { top: 50, left: 50},

			drag: resize

		});

	}

	function dropping () {

		$("li.placeholder").droppable({

			accept: "#draggable li.to-drag",
			hoverClass: "correct",
			activeClass: "active",
			revert: false,
			tolerance: "pointer",

			drop: function (event, ui) {

				var dragging = ui.draggable.clone();

				$(this).append(dragging).addClass("dropped");
				$(this).droppable('destroy');

				var day = $(ui.draggable).attr('data-id');
				var index = $(event.target).index();

				$("li.placeholder").data("order", index);

				$(this).append('<span class="remove">Del</span><span class="suggest"><texarea class="textarea" data-parent=></textarea></span>')

				var dropped = $(".dropped").length;
				var original = $(".placeholder").length;

				if (dropped === original) {

					$("#dropzone").append('<li class="placeholder"></li>');

					init();

				}

				$(".remove").click(function() {

					var removable = $(this).parent();

					if (dropped > original) {

						removable.remove();

					} else {

						removable.empty();

					}

					init();

				});

			}

		});

	}

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

});