JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<table width="100%">
<tr>
<td>
<div style="width: 30%; float: left; height: 500px;">
<span id="bjcb" class="draggable" style="color:Red">What up</span>
</div>
<div style="width: 70%; float: left; height: 500px;">
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="one"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="two"></div>
<div style="width: 49.5%; height: 50%; float: left;" class="droppable" id="three"></div>
<div style="width: 50%; height: 50%; float: right;" class="droppable" id="four"></div>
</div>
</td>
</tr>
</table>
CSS
.droppable
{
background-color: Gray;
border: solid 1px Red;
}
.draggable
{
background-color: Transparent;
}
JavaScript
$(function () {
$(".draggable").draggable({
revert: true
});
$(".droppable").droppable({
drop: function (event, ui) {
alert('dropped');
$(this).addClass("ui-state-highlight");
$(this).html(ui.draggable.prop('id'));
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var id = $(this).prop('id');
var map = new google.maps.Map(document.getElementById(id), mapOptions);
$(this).droppable("option", "disabled", true);
$(this).removeClass('ui-droppable ui-state-highlight ui-droppable-disabled ui-state-disabled');
}
});
});