JSFiddle - React, Tailwind, and code Playground

by Ruben Mezas

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">

<title>Drag and Drop</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="dragndrop.js"></script>
<body>
	
	<div class="portlet-items">
		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="460" data-div-height="230" >  	
		  		dragabble narrow 1	  		
		  	</div>
		</div>	
		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="460" data-div-height="230" >
		  		dragabble narrow 2
		  	</div>
		</div>

		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="940" data-div-height="230">  	
		  		dragabble wide 1	  		
		  	</div>
		</div>
		
		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="940" data-div-height="230" >  	
		  		dragabble wide 2		  		
		  	</div>
		</div>
		
		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="940" data-div-height="230" >  	
		  		dragabble wide 3		  		
		  	</div>
		</div>
		
		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="940" data-div-height="230" >  	
		  		dragabble wide 4		  		
		  	</div>
		</div>

		<div class="portlet-item">			
		  	<div class="portlet-name" data-div-width="940" data-div-height="230" >  	
		  		dragabble wide 5	  		
		  	</div>
		  	
		</div>		
	</div>


	<div class="portlet-container">		   	
	    <div class="portlet-wrapper" style="height:230px;">		    	    	
		    <div class="portlet" style="height:188px;">	   
		    	<div class="portlet-header">Portlet 6</div>
				<div class="portlet-content">content</div>	 	
		    </div>		    
	    </div>	
							
	    <div class="portlet-wrapper"...

CSS

.portlet-container{
	display: inline-block;	
 	margin-top:10px;
 	margin-bottom:10px;
 	width: 960px;
 	
}

.portlet-wrapper{
	overflow:hidden;	 	 	               
}

.portlet{	 	
 	border-radius: 4px;
    border: 1px solid #bbb;    
    background-color: white;    
    padding: 10px 10px;
    margin-top: 10px; 
    margin-bottom: 10px;
    position:relative;
    overflow:hidden;
}

.portlet-header{	         
    height: 25px;
}

.portlet-content{
	margin-bottom: 10px;
}

.portlet-options{
	float: right;
}

 .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 95%;
 }
 

.portlets-items{
	width: 220px;	
}
.portlet-item{
	margin: 2px;
	display: inline-block;
	width: 220px;
	height: 25px;    
}
.portlet-name{	
	width: 140px;	
	font-family: Akkurat, Helvetica, Arial, sans-serif;
    font-size: 12px;    
    color: #5c5e5f;
    border-radius: 2px;
    border: 1px solid #bbb;           
    padding: 2px;
    display: inline-block;
    
}
.portlet-action{	
	width: 50px;
	margin-left:5px;
	color: #5c5e5f;               
    padding: 2px; 
    display: inline-block;
}

JavaScript

/** 
 *  drag and drop
 */

$( function() {
	
	$( ".portlet-container" ).sortable({
		handle : ".portlet-header",
		cursor : "move",
		placeholder: "ui-state-highlight"
	}).droppable({   
    	accept: ".portlet-clone",     
        drop: function( event, ui ) {
	        	return $(ui.helper).clone(true, true)
		        .removeClass('ui-draggable-dragging')
		        .removeClass('portlet-clone')
		        .css("position", "")
		        .css("left", "")
		        .css("top", "").appendTo(this);
        }
    });
    
	$('.portlet-name').draggable( {	
		  connectToSortable: ".portlet-container",
	    cursor: 'move',
	    revert: 'invalid',
	    opacity: 0.7,
	    helper: portletHelper
	  } );
	
	
	function portletHelper( event ) {
		
		var portletWrapperStr = "<div class='portlet-wrapper portlet-clone' style='height:"+$(this).data("div-height")+"px; width:"+$(this).data("div-width")+"px;'></div>";		    	    	
		var portletStr	="<div class='portlet' "+
						" style='height:"+($(this).data("div-height")-40-2) +"px;'>"+		
						"   <div class='portlet-header'>"+$(this).html()+"</div>"+
						"</div>";		
	    
	    var portlet = $(portletStr);
		var portletWrapper = $(portletWrapperStr).append(portlet);
		return portletWrapper;
	}
	
} );