jQuery UI: Draggable

Draggable Elements

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<script src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<div class="header">
  <span class="drag main">X</span>
  <span class="drag main">O</span>
</div>
<div class="zone">
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop disabled"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
</div>

CSS

.header{
  padding: 20px;
  background: #000;
  color: #fff;
  text-align: center;
}

.drag{
  background: red;
  padding: 10px;
  margin-right: 20px;
}

.zone{
  width: 80%;
  margin: 40px auto;
}

.drop{
  display: inline-block;
  width: 27%;
  border: 1px solid #000;
  height: 70px;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
}

.ui-droppable-disabled {
    background: #494f54;
}

.ui-droppable-active {
    background: #65a167;
}

JavaScript

$(".drag").draggable({
    /* snap: true,
    snapTolerance: 10 */
    helper: "clone"
});


$(".drop").droppable({
    accept: ".drag",
    drop: function(event, ui) {
        if($(ui.draggable).hasClass('main')){
            var cloned = $(ui.draggable).clone();
          
            cloned.removeClass('main');
            $(this).append(cloned);
            //cloned.draggable();
        }
        
        $(this).droppable('disable');
    },
    out: function(event, ui) {
        $(this).droppable('enable');
    }
});


$('.disabled').droppable('disable');