jQuery UI: Draggable

Draggable Elements How to Stop Dragable After Drop in Dropable in jQuery UI?

by Akram kamal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<button type="button" id="App-1" class="btn btn-default btn-xs draggable">App-1</button>
<button type="button" id="App-2" class="btn btn-default btn-xs draggable">App-2</button>
<button type="button" id="App-3" class="btn btn-default btn-xs draggable">App-3</button>

<div id="droppable-1" class="droppable ui-widget-header"></div>
<div id="droppable-2" class="droppable ui-widget-header"></div>
<div id="droppable-3" class="droppable ui-widget-header"></div>

CSS

.droppable {
  width: 70px;
  height: 30px;
  padding: 5px;
}

JavaScript

$(function() {
	var results = {}
  $(".draggable").draggable({
    cancel: false
  });
  $(".droppable").droppable({
    drop: function(event, ui) {
      $(this).addClass("ui-state-highlight");
      ui.draggable.draggable("destroy")
      results[this.id].push(ui.draggable.attr("id"))
      console.log(results)  
      // you now have 
      // results["droppable-1"] with the ids of the buttons 
      // dropped in there
    }
  }).each(function(i,el){
  	results[el.id]=[]
  })
});