JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="left">

    <ul class="draggables">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

</div>

<div id="right">

    <ul class="draggables">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

</div>

CSS

#left, #right { float : left }
#right { margin-left: 20px }
ul { list-style-type: none; border:1px solid gray; padding:5px }
li { padding: 5px; margin: 5px; border:1px solid black; background-color: #E0E0E0 }

JavaScript

$(function() {

    $(".draggables").droppable({
        drop: function() { alert($(this).parents("div:first").attr("id")) }
    })
    .find("li")
    .draggable({
        helper: "clone"
    });

});