JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul class="pool">
			<li class="content-item" data-id="1">content-item 1</li>
			<li class="content-item" data-id="2">content-item 2</li>
			<li class="content-item" data-id="3">content-item 3</li>
			<li class="content-item" data-id="4">content-item 4</li>
			<li class="content-item" data-id="5">content-item 5</li>
			<li class="content-item" data-id="6">content-item 6</li>
		</ul>
		
		<div style="clear:both"><br/></div>

		<ul id="playlist"></ul>

CSS

.ui-resizable { position: relative;}
			.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
			.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
			.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
			.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
			.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
			.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
			.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
			.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
			.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
			.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

			ul {
				list-style-type: none;
				padding: 0;
			}

			#playlist {
				border: 1px solid black; 
				width: 100%;
				height: 70px;
			}

			.content-item {
				border: 1px solid black;
				background-color: #f00;
				width: 70px;
				height: 50px;
				float: left;
				padding: 10px;
				cursor: pointer;
			}

			.item-in-playlist {
				width: 50px;
				height: 70px;
				min-width: 50px;
				background-color: green;
				float: left;
				border: 1px solid yellow;
			}

JavaScript

$(function() {
				$('ul.pool li').draggable({
					revert: true,
					connectToSortable: '#playlist',
					helper: 'clone'
				});

				$('#playlist').sortable();

				$('#playlist').droppable({
					drop: function(event, ui) {
						console.log('drop');
						// Первый вариант - connectToSortable позволяет впихнуть итем между других итемов
						// но глючит ресайз

						var elem = $(ui.draggable);

						elem.resizable({
							handles: "e"
						});

						// Второй вариант - вставлять в sortable вручную итем, не глючит ресайз, но нелья 
						// вставлять между итемов

						/*
						if (ui.draggable.is('.content-item')) {
							var elem = $('<li class="item-in-playlist">' + ui.draggable.data('id') + '</li>');
							elem.resizable({
								handles: "e",
							}).appendTo(this);
						}
						*/	
					}
				});	
			});