Different Approch

Drag and drop to empty cell

by Rahul

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

	<ul id="canvas">
		<li class="c"><div class="a">1</div><div class="a">2</div></li>
		<li class="c"><div class="a">3</div><div class="e"></div></li>
		<li class="c"><div class="a">5</div><div class="a">6</div></li>
		<li class="c"><div class="e"></div><div class="a">7</div></li>
		<li class="c"><div class="a">8</div><div class="a">9</div></li>
		<li class="c"><div class="a">10</div><div class="a">11</div></li>
		<li class="c"><div class="a">12</div><div class="a">13</div></li>
		<li class="c"><div class="b">BIG 14 and 15</div></li>
		<li class="c"><div class="e"></div><div class="a">4</div></li>
	</ul>

CSS

ul{
width:200px;
text-align: justify;
}
li{
	border: 1px red solid;
	padding: 5px 2px;
}
 
.e:before{
content: "EMPTY";
}

.e,.a {
	border:1px dotted green;
	width: 45%;
	height:30px;
	display: inline-block;
	padding:1px 2px;
}
.b{
padding:1px 2px;
border:1px dotted green;
width: 95%;
height:30px;
	display: inline-block;
}

JavaScript

$.fn.dragInit=function(){
		 $(this).each(function(){
		 console.log("Drag called",this,$(this).data("drag_Enable"));
		 if($(this).data("drag_Enable")==true){
	  			$.noop();
	  	 }else{
	  			$(this).draggable({
	  				containment: "#canvas",
	  				snap:true,
	  				cursor:"move",
	  				zIndex:99,
	  				revert:"invalid",
	  				stop:function(event,ui){
	  					$(".dummy").remove();
						$("#canvas li").filter(function(){
								return $(this).children(":not('.e')").length==0; 
						}).remove();
	  				}
	  			 });
	  			$(this).data("drag_enable",true);	
	     }
		 }); 
		 return this;
	 }
	 $.fn.dropInit=function(){
		 $(this).each(function(){
		 console.log("drop called",this,$(this).data("drop_enable"));
		 if($(this).data("drop_enable")==true){
				$.noop();
			}else{
				$(this).droppable({
					tolerence:"pointer",
					drop:function(event,ui){
						
							var drop2=ui.draggable.clone();
							var emptyDrop=$("<div class='e'>");
							$(drop2).removeAttr("style");
							console.log("Drop ",drop2,"THIS",$(this),"DROP DATA",drop2.data());
							var ne=$(".dummy").empty();//Helper li.
							var pos=$(this).parent().children().index($(this));
							
							 
		 					if($(this).hasClass("e") && $(drop2).hasClass("a") ){//drop on empty cell
		 						$(this).replaceWith(drop2);
								
							}else if(drop2.hasClass("b")){// drop on existing cell, add it in new row. 
								    ne.html(drop2).removeClass("dummy").addClass("c");
							}else if(pos==0){//double cell modell
								ne.append(drop2).append(emptyDrop).removeClass("dummy").addClass("c");   
								
							}else{
								ne.append(emptyDrop).append(drop2).removeClass("dummy").addClass("c");
							}
							
							drop2.dragInit().dropInit();
							emptyDrop.dropInit();
							var emptyDrop1=$("<div class='e'>");
		  					emptyDrop1.dropInit();
		  					$(ui.helper).replaceWith(emptyDrop1);//replace original place with Empty cell
							$(".dummy").remove();
							$("#canvas...