JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div>
 <div class="holder span3">
   	 <div class="item" data="navbar">
     	 navbar
     </div>
     <div class="item" data="row">
     	 row
     </div>
     <div class="item" data="span2">
     	 span2
     </div>
     <div class="item" data="span3">
     	 span3
     </div>
    <div class="item" data="span4">
     	 span4
    </div>
	<div class="item" data="btn">
   		<button class="btn">Button</button>
    </div>
    <div class="item" data="btn-group">
     	<div class="btn-group">
          <button class="btn">Left</button>
          <button class="btn">Middle</button>
          <button class="btn">Right</button>
        </div>
    </div>
   	
   <button class="btn" id="btnEnable">Enable</button> <button class="btn" id="btnDisable">Disable</button>
   
   </div>
   <div class="special span9">
     <div class="container"> </div>
   </div>

</div>


<div id="context-menu" style="display:none;">
  <ul class="nav" style="font-size:80%;">
    <li class="context-heading"> </li>
    <li class="divider-vertical"> </li>
    <li>
      <ul style="margin:0;padding:5px;">
        Attributes
        <table class="table">
          <tbody><tr>
            <td>id</td>
            <td><input type="text" id="context-menu-id"></td>
          </tr>
          <tr>
            <td>style</td>
            <td><input type="text" id="context-menu-style"></td>
          </tr>
          <tr>
            <td>class</td>
            <td><input type="text" id="context-menu-class"></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="button" class="btn btn-mini" value="OK" id="optSave"></td>
          </tr>
        </tbody></table>
      </ul>
    </li>
    <li><a href="#" id="optDel"><i class="icon-trash"></i> Delete</a></li>
  </ul>
</div>

CSS

.holder {
	float:left;
  	width:100px;
  	zoom:0.8;
}
.item {
	padding:3px;
  	border:1px dashed #999;
  	overflow:auto;
  	
}

.dropped:hover {
  	border:1px inset #22DD22 !important;
  	border-collapse:collapse;
}

.droppedSelected,.droppedSelected:hover {
  	/*border:2px inset #BB0000 !important;
  	position:relative;
  	z-index:1199;*/
}
  
.hanger {
  	background-color:#22CC22;
  	border:1px solid #22CC22;  	
    position:relative;
  	padding:2px;
  	z-index:1200;
  	margin-left:2%;
}

.special {
	background-color:#efefef;
  	height:400px;
  	margin-left:10px;
}

.special [class*="span"].ui-draggable {
	border:1px dotted #777;
  	min-height:30px;
}

.special .row.ui-draggable, .special .row-fluid.ui-draggable {
    border:1px dashed #444;
  	min-height:30px;
}

.special .container {
	height:100%;
    border:1px dotted #ccc;
}

.target {
  	background-color:#55ff55 !important;
	opacity:.6;
}

#context-menu input {
	font-size:80%;
  	width:100%;
  	border:0;
  	padding:0;
  	box-shadow:0 0 0;
  	background-color:#efefef;
  	margin-bottom:0;
}

#context-menu .table {
	font-size:90%;
  	width:150px;
}

#context-menu .table td {
	padding: 2px;
  	vertical-align:middle;
}

#context-menu .table td:first-child {
	text-align:right;
}

.context-heading {
	background-color:#efefef;
  	padding:3px;
  	font-weight:800;
}

.ui-draggable-dragging {
  	border:1px inset #111111;
}

.ui-state-disabled {
    opacity:1;
}

JavaScript

(function($) {
    $.fn.setUpContextMenu = function() {
        $(this).dialog({
            autoOpen: false,
            modal: false,
            resizable: false,
            width: 'auto',
            height: 'auto',
            minHeight: 'auto',
            minWidth: 'auto'
        });

        return $(this);
    };

    $.fn.openContextMenu = function(jsEvent,eleType) {
        var menu = $(this);
   
        menu.css('padding', 0);
        menu.dialog('option', 'position', [jsEvent.clientX, jsEvent.clientY]);
        menu.unbind('dialogopen');
        menu.bind('dialogopen', function(event, ui) {
            $('.ui-dialog-titlebar').hide();
            $('.ui-widget-overlay').unbind('click');
            $('.ui-widget-overlay').css('opacity', 0);
            $('.ui-widget-overlay').click(function() {
                menu.dialog('close');
            });
        });
      	menu.find(".context-heading").html(eleType);
        menu.dialog('open');	

        return false;
    };
})(jQuery); 

$('#context-menu').setUpContextMenu();

$('#optSave').click(function(e) {
	var originalElement = $("#context-menu").data('originalElement');
  	
  	originalElement.attr("id",$("#context-menu-id").val());
 	originalElement.attr("style",$("#context-menu-style").val());
  	originalElement.addClass($("#context-menu-class").val());
  
  	$("#context-menu").dialog('close');
});

$('#optDel').click(function(e) {
	var originalElement = $("#context-menu").data('originalElement');
    originalElement.remove();
  	$("#context-menu").dialog('close');
});

var objs = {
  "row":{"ht":"<div class=\"row-fluid\"></div>","accept":"[data*=span]"},
  "span2":{"ht":"<div class=\"span2\"></div>","accept":"[data*=btn]"},
  "span3":{"ht":"<div class=\"span3\"></div>","accept":"[data*=span],[data*=btn]"},
  "span4":{"ht":"<div class=\"span4\"></div>","accept":"[data*=span],[data*=btn]"},
  "navbar":{"ht":"<div class=\"navbar\"><div class=\"navbar-inner\"><a class=\"brand\"...