JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div id="main">
<div id="side">
    <div class="panel"><h3>Title A</h3><div class='content'>Content A</div></div>
    <div class="panel"><h3>Title B</h3><div class='content'>Content B</div></div>
    <div class="panel"><h3>Title C</h3><div class='content'>Content C</div></div>
    <div class="panel"><h3>Title D</h3><div class='content'>Content D</div></div>
</div>
    <div id="outside"></div>
</div>

CSS

#main {
    width: 1024px;
    height: 1024px;
    background-color: #eee
}

#side {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 200px;
    height:1015px;
    border: 1px solid #666;
}

.panel {
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 185px;
}

.panel h3 {
    padding: 5px;
    font-size: 18px;
    background-color: #999;
    margin: 0px 0px 3px;
}

JavaScript

jQuery('#side')
            .sortable({
                //connecWith: '.dropme',
                handle: 'h3',
                cursor: 'pointer',
                over: function(e, ui) { sortableIn = 1; },
                out: function(e, ui) { sortableIn = 0; },
                beforeStop: function (event, ui) {        
                    newItem = ui.item;
                    if (sortableIn == 0) { 
                      //ui.item.remove(); 
                        //debugger;
                        ui.item.offset(ui.offset);
        				$('#outside').append(ui.item);
                        $(ui.item).draggable();
                    } else {
                        //debugger;
                    }
                },
                stop: function(){
                    debugger;
                }
            })
        .droppable({
            accept: ".panel",
			hoverClass: "sidebar-state-hover",
			activeClass: "sidebar-state-active",
		    drop: function (event, ui) {
                debugger;
				ui.draggable.data('dropped', true);
				//var el = ui.draggable[0];
	            //el.setStyles({'left':null, 'top': null});
                ui.draggable.css('left', '0').css('top', '0');
	            ui.draggable.removeClass('floatingPanel');
                $(ui.draggable).draggable('destroy');
				$('#side').append(ui.draggable);
	        }
		});