Drag and Drop, sortable with custom event drop

by Marcelo Leiva

HTML

<ul id="draggable">
  <li>
    <div class="row">
      <div class="col-xs-6 col-md-4">
        <img name="SELECT" src="http://s13.postimg.org/j0qxzty7n/select.png"/>          
        </div>
      <div class="col-xs-6 col-md-4 options"></div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="col-xs-6 col-md-4">
        <img name="INPUT" src="http://s30.postimg.org/x7f311jv1/input.png" />          
      </div>
      <div class="col-xs-6 col-md-4 options"></div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="col-xs-6 col-md-4">
        <img name="DATE" src="http://s24.postimg.org/cylp3nzkx/date.png"/>          
      </div>
      <div class="col-xs-6 col-md-4 options"></div>
    </div>
  </li>
</ul>

<div class="col-xs-12 col-md-8">
    <div class="form-row" name="default">
        <label for="group_default">Group Default</label>
        <ul class="sortable ul_group" id="group_default"></ul>
    </div>
</div>

<div class="col-xs-12 col-md-8">
    <div class="form-row" name="one">
        <label for="group_1">Group 1</label>
        <ul class="sortable ul_group" id="group_1"></ul>
    </div>
</div>

<div class="col-xs-12 col-md-8">
    <div class="form-row" name="two">
        <label for="group_2">Group 2</label>
        <ul class="sortable ul_group" id="group_2"></ul>
    </div>
</div>

CSS

.ul_group {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
    list-style: none
}

.droppable li {
    padding-top: 10px;
    padding-bottom: 5px;
}

JavaScript

$(function() {
    $( "#draggable li" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid"
    }).disableSelection();
    
    $( ".sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
        var button = $('<button>');
        button.attr({
          'class': "btn btn-default dialog",
          'data-toggle': "modal",
          'data-target': "#modal"
        });
        var li = ui.item.children('.row')
            .children('.options')
            .append(button.html('Edit'));
            
        $(this).append(li);
        }
    }).disableSelection();
});