JSFiddle - React, Tailwind, and code Playground

by Boro

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' style="background-color: pink;">
                <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:180px;
    padding:20px 10px;
    min-height:500px;
}
.targets{
    background-color: yellow;
}

.choices{
    background-color: green;
}

.target, .choice{
    height:60px;
    width:150px;
    margin:10px 0;
    padding:15px;
}

.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({
    accept: function(el) {
        var isO = false;
        var cT = $(this);
        console.log("el id: " + $(el).attr("id"));
        console.log(cT);
        $.each(info, function(i, pos) {
            if ($(cT).attr("id") == pos.target) {
                isO = true;
            }
        });
        if (isO) {
            return false;
        }
        return true;
    },
    drop: function(event, ui) {
        ui.draggable.position({
            my: 'left top',
            at: 'left top',
            of: $(this)
        });

        var cT = $(this);
        console.log(cT);
        var isO = false;
        $.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({
                        //      my: 'left top',
                        //      at: 'left top',
                        //      of: $("#" + prev.target)
                        //  });
                        //  pos.target = prev.target;
                        //  prev.target = $(cT).attr("id");
                        isO = true;
                    }
                });
            }
        });

        if (isO) {
            return false;

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

        console.log(info);
    }
});