JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div id="items">
    <div class="item"><textarea>Item 111111</textarea>
    <span class="delete"><button>Delete Line</button></span>
    </div>
    
    <div class="item"><span>Item 222222</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>
    
    <div class="item"><span>Item 333333</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>
</div>

<span class="info">Drag Items Here</span>
<div id="cart">
    
</div>

CSS

#leftitems {
    float:left;
    margin-right:30px;
    min-height:500px;
}
#cart {
    padding:20px;
    border:2px solid #000;
}
.item, .item_dz {
    padding:10px;
 //   width:300px;
}
.item, .item_dz, span :hover {
    cursor:move;
}
#cart .item_dz {
    padding:10px;
    border:2px dotted #000;
    margin-bottom:10px;
}
#items .delete {
    display: none;
}

.delete {
    opacity:0.7;
    margin-left:20px;
    float:right;
}
.delete :hover {
    cursor: pointer;
    opacity:1;
}
.item > .delete {
    display:none;
}

JavaScript

$$('.item').addEvent('mousedown', function (event) {
    if (event.target == this.getParent().getElement('.delete button')) return;
     event.stop();

    // `this` refers to the element with the .item class
    var item = this;

    var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
        opacity: 0.7,
        position: 'absolute'
    }).inject(document.body);

    var drag = new Drag.Move(clone, {

        droppables: $('cart'),
      
        onDrop: function (dragging, cart) {
            dragging.destroy();
            
            item.removeClass('item');
            item.addClass('item_dz');
            
            var mySortables = new Sortables('', {
            clone: true,
            opacity: 0.4
            }); 
            
            setTimeout(function(){
                mySortables.addLists(cart);   
            },1);
            

            if (cart != null) {
                item.clone().inject(cart);
                cart.highlight('#4679BD', '#FFF');
                item.removeClass('item_dz');
                item.addClass('item');
            }
        },
        onEnter: function (dragging, cart) {
            cart.tween('background-color', '#FFF04F');
        },
        onLeave: function (dragging, cart) {
            cart.tween('background-color', '#FFF');
        },
        onCancel: function (dragging) {
            dragging.destroy();             
        }
    });
    drag.start(event);
});
window.addEvent('click:relay(.delete)', function () {
    this.getParent().destroy();
    this.destroy();
})

$$('.delete').addEvents({
    mouseover: function () {
        this.tween('opacity', '1');
        this.getParent(['.item_dz']).fade(0.3);
        this.getParent(['.item_dz']).tween('background-color', '#fff', '#f00');
    },
    mouseleave: function () {
        this.tween('opacity', '0.5');
        this.getParent(['.item_dz']).fade(1);
        this.getParent(['.item_dz']).tween('background-color', '#f00',...