<script>
  $( function() {
    $( "#dragrabble-one" ).draggable({ helper: 'clone' });
    $( "#dragrabble-two" ).draggable({ helper: 'clone' });
    $( "#dragrabble-three" ).draggable({ helper: 'clone' });
    $( "#dragrabble-four" ).draggable({ helper: 'clone' });
    $( "#dragrabble-five" ).draggable({ helper: 'clone' });
    $( "#dragrabble-six" ).draggable({ helper: 'clone' });
    $( "#dragrabble-seven" ).draggable({ helper: 'clone' });
    $( "#dragrabble-eight" ).draggable({ helper: 'clone' });
    $( "#dragrabble-one" ).draggable({ revert: "invalid" });
    $( "#dragrabble-two" ).draggable({ revert: "invalid" });
    $( "#dragrabble-three" ).draggable({ revert: "invalid" });
    $( "#dragrabble-four" ).draggable({ revert: "invalid" });
    $( "#dragrabble-five" ).draggable({ revert: "invalid" });
    $( "#dragrabble-six" ).draggable({ revert: "invalid" });
    $( "#dragrabble-seven" ).draggable({ revert: "invalid" });
    $( "#dragrabble-eight" ).draggable({ revert: "invalid" });
    $( "#droppable-box" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight-no" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
  </script>