JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="azul arrastrable" style="top: 140px; right: 10px;"></div> 
<div class="rojo arrastrable" style="top: 98px; right: 10px;"></div> 
<div class="rojo arrastrable" style="top: 160px; right: 10px;"></div> 
<div class="azul arrastrable" style="top: 120px; right: 10px;"></div> 
<div class="azul arrastrable" style="top: 180px; right: 10px;"></div> 
<div class="rojo arrastrable" style="top: 30px; right: 10px;"></div> 
<div class="rojo arrastrable" style="top: 50px; right: 10px;"></div> 
<div class="azul arrastrable" style="top: 70px; right: 10px;"></div> 

<div id="sueltarojo" class="suelta"> 

</div> 
<div id="sueltaazul" class="suelta"> 

</div>

CSS

.azul {
    background: url('http://static.nsel-clnsa.com.ni/Images/Icons/LDC/SPT_LDC_tractor.png') no-repeat repeat 0px 1px;
    cursor: pointer;
}
.rojo {
    background: url('http://static.nsel-clnsa.com.ni/Images/Icons/LDC/SPT_LDC_tractor.png') no-repeat repeat 0px 265px;
    cursor: pointer;
}
.azul, .rojo {
    width: 25px;
    height: 20px;
    position: absolute;
}
div {
    display: block;
}
#sueltaazul {
    border-color: #99f;
    clear: both;
}
.suelta {
    padding: 10px;
    border: 1px solid #ddd;
    width: 200px;
    height: 40px;
    float: left;
    text-align: center;
    margin: 10px;
}
#sueltarojo {
    border-color: #f99;
}

JavaScript

$(function() {
     //Dragable
    $( ".arrastrable" ).draggable();
     //Contador
    $(".suelta").data("numsoltar", 0);    
     //Dropable
    $(".suelta").droppable({ 
       drop: function( event, ui ) { 
          if (!ui.draggable.data("soltado")){ 
             ui.draggable.data("soltado", true); 
             var elem = $(this); 
             elem.data("numsoltar", elem.data("numsoltar") + 1) 
             elem.html(elem.data("numsoltar") + " item").fadeOut(500); 
          } 
       }, 
       out: function( event, ui ) { 
          if (ui.draggable.data("soltado")){ 
             ui.draggable.data("soltado", false); 
             var elem = $(this); 
             elem.data("numsoltar", elem.data("numsoltar") - 1); 
             elem.html(elem.data("numsoltar") + " item"); 
          } 
       } 
    });
    //Soltar solo los elementos en su color referenciado
     //soltar solo elementos rojos 
    $("#sueltarojo").droppable("option", "accept", ".rojo"); 
    //soltar solo elementos azules 
    $("#sueltaazul").droppable("option", "accept", ".azul");    
 });