JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="picker">
            <div class="choices">
                <div id='aW'>
                <div class="choice" id='A'>
                    <h1>A</h1>
                </div>
            </div>
            <div id='bW'>
                <div class="choice" id='B'>
                    <h1>B</h1>                   
                </div>
            </div>
            <div id='cW'>
                <div class="choice" id='C'>
                    <h1>C</h1>
                </div>
            </div>
            </div>
            <div class="targets">
                <div class="target" id='1'></div>
                <div class="target" id='2'></div>
                <div class="target" id='3'></div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>

CSS

body{
    font-size:30pt;
    padding:0;
    margin:0;
    font-family:Helvetica Neue, Helvetica, Arial, Sans-serif;
    padding:20px;
}

.targets, .choices{
    float:left;
    width:250px;
    padding:20px 10px;
    min-height:500px;
}

.target, .choice{
    height:60px;
    width:160px;
    margin:20px 0;
    padding:20px;
}

.target{
    border:1px solid black;
}

.choice{
    border:1px solid red;
}

.clear{
    clear:both;
}

JavaScript

var info = [];

$(".choice").draggable({
    containment: ".picker",
    cursor: "move",
    revert: "invalid"
});

$(".choice").each(function() {
    var eP = {
        choice: $(this).attr("id"),
        target: $(this).parent().attr("id")
    };
    info.push(eP);
    //console.dir(eP);
});

$(".target").droppable({
    drop: function(event, ui) {
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });

        var cT = $(this);

        $.each(info, function(i, pos) {
            if ($(cT).attr("id") == pos.target) {
                $.each(info, function(i, prev) {
                    if ($(ui.draggable).attr("id") == prev.choice) {
                        $("#" + pos.choice).position({
                            of: $("#" + prev.target),
                            my: 'left top',
                            at: 'left top'
                        });
                        pos.target = prev.target;
                        prev.target = $(cT).attr("id");
                    }
                });

            }
        });

        $.each(info, function(i, pos) {
            if ($(ui.draggable).attr("id") == pos.choice) {
                pos.target = $(cT).attr("id");
            }
        });
    }
});