JQuery UI Droppable

Fix for droppable firing twice

by Melvin Stanly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dropableArea">Drop area</div>
<hr>

<ul>
  <li class="dragModule">Item 1</li>
  <li class="dragModule">Item 2</li>
  <li class="dragModule">Item 3</li>
</ul>

CSS

#dropableArea {
  height: 30px;
}

JavaScript

$(function() {
  $('.dragModule').draggable({
    connectToSortable: '#dropableArea',
    helper: 'clone'
  });

  $('#dropableArea').droppable({
    accept: '.dragModule',
    activeClass: 'active-droppable'
  });

  $('#dropableArea').sortable({
    accept: '.dragModule',
    connectWith: '#dropableArea',
    revert: true,
    receive: function (event, ui) {      
       alert("receive been triggered.");
    }
  });
  $("#dropableArea").disableSelection();
});