JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<div id="play">
            <input type="text" placeholder="new element here" id="textInput" onkeypress="return enterTextinput(event,0);"/>
            <input type="button" value="create" onclick="return enterTextinput(event,1);" />
            <ul id="list1">
                <li class="list1"><div id="item1">Item #1</div></li>
                <li class="list1"><div id="item2">Item #2</div></li>
                <li class="list1"><div id="item3">Item #3</div></li>

                <li class="list1"><div id="item4">Item #4</div></li>
                <li class="list1"><div id="item5">Item #5</div></li>
            </ul>
            <ul id="list2">
                <li class="list2"><div id="item6">Item #6</div></li>
                <li class="list2"><div id="item7">Item #7</div></li>
                <li class="list2"><div id="item8">Item #8</div></li>
                <li class="list2"><div id="item9">Item #9</div></li>
                <li class="list2"><div id="item10">Item #10</div></li>
            </ul>
               <div id="konzol"></div>
        </div>

CSS

.yui3-dd-proxy {
        text-align: left;
    }
    #play {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        zoom: 1;
    }
    #play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
    #play ul {
        border: 1px solid black;
        margin: 10px;
        width: 200px;
        height: 300px;
        float: left;
        padding: 0;
        zoom: 1;
        position: relative;
    }
    #play ul li {
        background-image: none;
        list-style-type: none;
        padding-left: 20px;
        padding: 5px;
        margin: 2px;
        cursor: move;
        zoom: 1;
        position: relative;
    }
    #play ul li.list1 {
        background-color: #8DD5E7;
        border:1px solid #004C6D;
    }
    #play ul li.list2 {
        background-color: #EDFF9F;
        border:1px solid #CDCDCD;
    }

JavaScript

var callDragDrop = function(){    
            
            
            YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {
                //Listen for all drop:over events
                Y.DD.DDM.on('drop:over', function(e) {
                    //Get a reference to our drag and drop nodes
                    var drag = e.drag.get('node'), drop = e.drop.get('node');

                    //Are we dropping on a li node?
                    if(drop.get('tagName').toLowerCase() === 'li') {
                        //Are we not going up?
                        if(!goingUp) {
                            drop = drop.get('nextSibling');
                        }
                        //Add the node to this list
                        e.drop.get('node').get('parentNode').insertBefore(drag, drop);
                        //Resize this nodes shim, so we can drop on it later.
                        e.drop.sizeShim();
                    }
                });
                //Listen for all drag:drag events
                Y.DD.DDM.on('drag:drag', function(e) {
                    //Get the last y point
                    var y = e.target.lastXY[1];
                    //is it greater than the lastY var?
                    if(y < lastY) {
                        //We are going up
                        goingUp = true;
                    } else {
                        //We are going down.
                        goingUp = false;
                    }
                    //Cache for next check
                    lastY = y;
                });
                //Listen for all drag:start events
                Y.DD.DDM.on('drag:start', function(e) {
                    //Get our drag object
                    var drag = e.target;
                    //Set some styles here
                    drag.get('node').setStyle('opacity', '.25');
                    drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
                   ...