JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="portlet-list">
    <div class="portlet">Item 1</div>
</div>
<div id="target"></div>

CSS

#target {
    border: 1px solid red;
    min-height: 30px;
}
.portlet {
    border: 1px solid blue;
}
.placeholder {
    border: 1px solid green;
    height: 20px;
}

JavaScript

$(function () {
    $("#portlet-list").draggable({
        connectToSortable: "#target",
        helper: function () {
            return $("<div>Helper</div>");
        }
    });


    $("#target").sortable({
        items: '.portlet',
        placeholder: 'placeholder',
        stop: function (event, ui) {

            var item = ui.item;
            var helper = ui.helper;

            alert("Item text: "+item.text());
            alert("Helper: "+helper);

        }
    });
    $("#portlet-list").disableSelection();
     $("#target").disableSelection();
})