JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demoLayout" data-dojo-type="app/draganddrop"></div>

CSS

body {
                padding-left:50px;
            }
            .listContainer {
                 float:left;
                 margin-right:50px;
            }
            .sourceList, .targetList, .eventStatusList { 
                width: 400px; 
                min-height:300px; 
                border: 1px solid #000; 
                height:300px;
                overflow-y: scroll;
                } 
            .sourceList li { cursor: pointer }
            
            .source-avatar { border:1px solid #000; padding: 10px; }
            
            .targetList { margin:0px; padding:0px;}
            .targetList li { list-style:none; margin:0px; }
            .targetList li .target-item {
                width:100%;
                height:50px;
                font-weight:bold;
            }

JavaScript

define("app/draganddrop", [
    "dojo",
    "dojo/_base/declare",
    "dojo/dom-construct", 
    "dojo/on",
    "dojo/_base/lang",
    "dojo/query",
    "dojo/dom-attr",
    "dojo/number",
    "dojo/dnd/Source",
    "dojo/dnd/Target",
    "dojo/dnd/Manager",
    
    "dijit/_Widget"    
], function(
    dojo,
    declare,
    domConstruct,
    on,
    lang,
    query,
    domAttr,
    number,
    Source,
    Target,
    Manager,
    
    Widget
) {
    return declare([
        Widget
    ], 
    {
        source: null,
        target: null,
        eventStatusList: null,
        eventStatusListMouseMoveSourceItem: null,
        eventStatusListMouseMoveTargetItem: null,
        
        postCreate: function() {
            var sourceContainer = domConstruct.create("div", { class: "listContainer" }, this.domNode);
            var sourceTitle = domConstruct.create("h1", { class: "listTitle", innerHTML: "Source" }, sourceContainer);
            var sourceListNode = domConstruct.create("ul", { id: "draganddropSource", class: "sourceList" }, sourceContainer);
            
            var targetContainer = domConstruct.create("div", { class: "listContainer" }, this.domNode);
            var targetTitle = domConstruct.create("h1", { class: "listTitle", innerHTML: "Target" }, targetContainer);
            var targetListNode = domConstruct.create("ul", { id: "draganddropTarget", class: "targetList" }, targetContainer);
            
            this.source = new Source("draganddropSource", { creator: this.sourceItemCreator, copyOnly: true, generateText: false }); 
            this.source.insertNodes(false, [
			        { id: "sourceItem1", text: "item 1", description: "This is item 1", color: "blue" },
                    { id: "sourceItem2", text: "item 2", description: "This is item 2", color: "orange" },
                    { id: "sourceItem3", text: "item 3", description: "This is item 3", color: "green" },
                    { id: "sourceItem4", text: "item 4",...