JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<ul id="dragbox" data-bind="foreach:user">
    <li data-bind="text:$data.name,drag:{value:$data.name}"></li>
</ul>

<hr/>
<div id="dropbox" data-bind="drop: {value: latestone}">
        <div data-bind="visible:(!!latestone())">
            <p >Thanks for adding <span data-bind="text:latestone"></span>!</p>
            <span>So far, you've added:</span>
            <ul data-bind="foreach: movedArray">
                <li data-bind="text: $data"></li>
            </ul>
        </div>
    </div>
<hr/>

CSS

*{
    font-family: Helvetica, Arial;
}
ul{
    list-style: square;
}
#dragbox li{
    border:1px solid brown;
    width:150px;
    cursor:default;
}
#dropbox{
    border:1px solid red;
    width:400px;
    height:400px;
 }
#dropbox p{
    font-weight:bold;
    text-align:center;
}
#dropbox div{
    padding:50px;
}

JavaScript

(function() {
    var _dragged;
    ko.bindingHandlers.drag = {
        init: function(element, valueAccessor) {
            var dragElement = $(element);
            var dragOptions = {
                helper: 'clone',
                revert: true,
                revertDuration: 0,
                start: function() {
                    _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                },
                cursor: 'default'
            };
            dragElement.draggable(dragOptions).disableSelection();
        }
    };

    ko.bindingHandlers.drop = {
        init: function(element, valueAccessor) {
            var dropElement = $(element);
            var dropOptions = {
                drop: function(event, ui) {
                    valueAccessor().value(_dragged);
                }
            };
            dropElement.droppable(dropOptions);
        }
    };
})();
var ViewModel = function () {
    var self = this;
    self.user = ko.observableArray([{name:'jhon'},{name:'charlie'},{name:'jack'}]);
    self.movedArray=ko.observableArray()
    self.latestone = ko.computed({
        read: function() {
            return self.movedArray().length ? self.movedArray()[0] : "";
        },
        write: function(value) {
            self.movedArray.unshift(value); // adds as first element in array 
        },
        owner: self
    });
};

$(function() {
    ko.applyBindings(new ViewModel());
});