JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
 <h1>Configure Panels</h1>
   <div class="row-fluid">
  <h2> dashboard</h2>
     <div class="span5">
   <h3>Active Widgets</h3>
   <div class="container-fluid active_widget_area well" id="dashboard">
        <ul class="sortable active_widget_list">
            <li class="ui-state-highlight">test</li>
            <li class="ui-state-highlight">test2</li>
                  </ul>
   </div>
         </div>
<div class="span5">
<h3>Available Widgets</h3>
<ul id=available_dashboard class="available_widget_list connectedSortable">
        <li class="ui-state-default"> Example</li>
        <li class="ui-state-default"> Example2</li>
    </ul><br/>
    </div>
   </div>

CSS

.active_widget_list, .available_widget_list { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    .active_widget_list li, .avilable_widget_list li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    .active_border {
        border-width: 3px;
        border-color: #ff3e00;
    }

JavaScript

var mouse_left = 0;
    $(document).ready(function(){
    $('.sortable').sortable({
         start: function(e, ui) {
            
        },
        stop: function(e, ui ) {
          
        },
        over: function(e, ui) { sortableIn = 1; },
        out: function(e, ui) { sortableIn = 0; },
        beforeStop: function (event, ui) {
            newItem = ui.item;
            if (sortableIn == 0) { 
              //ui.item.remove(); 
              $(ui.item).draggable();
           }
        },
        receive:  function(event, ui) {
            $(newItem).attr('class', 'ui-state-highlight');
        }}).disableSelection();
    });

      $(document).ready(function() {
          $('#available_dashboard > li').draggable({
              revert: 'invalid',
              connectToSortable: '#dashboard > ul',
              helper: 'clone',
              containment: 'panel_area',
              start: function() {
                  contents = this;
              }
          });
      });
      $(document).ready(function() {
          $('#dashboard').droppable({
              hoverClass: 'active_border',
              accept: '#available_dashboard > li'
          });
      });