JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<div style="width:700px;">
		<div class="left">
			<table>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item"></div></td>
				</tr>
				<tr>
					<td><div class="item">gooo</div></td>
				</tr>
			</table>
		</div>
		<div class="right ui-widget-content">
			<table>
				<tr>
				</tr>
				<tr>
					<td class="time">08:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">09:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">10:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">11:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">12:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">14:00</td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
					<td class="drop"></td>
				</tr>
				<tr>
					<td class="time">15:00</td>
					<td class="drop"></td>
					<td...

CSS

.left{
			width:120px;
			float:left;
		}
		.left table{
			background:#E0ECFF;
		}
		.left td{
			background:#eee;
		}
		.right{
			float:right;
			width:500px;
		}
		.right table{
			background:#E0ECFF;
			width:100%;
		}
		.right td{
			background:#fafafa;
			color:#444;
			text-align:center;
			padding:2px;
		}
		.right td{
			background:#E0ECFF;
		}
		.right td.drop{
			background:#fafafa;
			width:100px;
		}
		.right td.over{
			background:#FBEC88;
		}
		.item{
			text-align:center;
			border:1px solid #499B33;
			background:#fafafa;
			color:#444;
			width:100px;
		}
		.assigned{
			border:1px solid #BC2A4D;
		}
		.trash{
			background-color:red;
		}
#resetButtonId{display:none;}

JavaScript

$(function(){
			$('.left .item').draggable({
				revert:true,
				proxy:'clone'
			});
			$('.right td.drop').droppable({
				onDragEnter:function(){
					$(this).addClass('over');
                    $('#resetButtonId').show();
                    console.log('hiii');
				},
				onDragLeave:function(){
					$(this).removeClass('over');
                    
				},
				onDrop:function(e,source){
					$(this).removeClass('over');
					if ($(source).hasClass('assigned')){
						$(this).append(source);
					} else {
						var c = $(source).clone().addClass('assigned');
						$(this).empty().append(c);
						c.draggable({
							revert:true
						});
					}
				}
			});
			$('.left').droppable({
				accept:'.assigned',
				onDragEnter:function(e,source){
					$(source).addClass('trash');
				},
				onDragLeave:function(e,source){
					$(source).removeClass('trash');
				},
				onDrop:function(e,source){
					$(source).remove();
				}
			});
         $('#resetButtonId').click(function(){
         $( ".drop" ).empty();  
         $(this).hide();
        }); 
	});