Mise en place de draggable

HTML

<script src="http://tutos.sebastienangot.fr/2011/drag-and-drop-jquery-ajax/demo/js/jquery-ui-1.8.custom.min.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable" >
  <div class="portlet ui-state-highlight">
    <div class="portlet-header">Model 1</div>
    <div class="portlet-content">Fluctuat nec mergiture</div>
  </div>
  <div class="portlet ui-state-highlight">
    <div class="portlet-header">Model 2</div>
    <div class="portlet-content">Alea jacta est</div>
  </div>
</div>


<div id="sortable">
<input type="hidden" value="5" id="max_div" />
  <div class="column">

    <div id="div_1" class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">LoremipsumdolorLoremipsumdolorLoremipsumdolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div id="div_2" class="portlet">
      <div class="portlet-header">News</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div id="div_3" class="portlet">
      <div class="portlet-header">Shopping</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div id="div_4" class="portlet">
      <div class="portlet-header">Links</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div id="div_5" class="portlet">
      <div class="portlet-header">Images</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

</div>

CSS

body {
    min-width: 520px;
  }
  
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
  }
  
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
    overflow: wordwrap;
  }
  
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  
  .portlet-content {
    padding: 0.4em;
  }
  
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
#draggable, #sortable {
  width:700px;
  clear:both;
  display:block;
}  
  
#draggable > .portlet  
 {
  width: 170px;
    float: left;
    padding-bottom: 5px;
}

#draggable .portlet > .portlet-content { display:none; padding: 0.4em; }

JavaScript

$(function() {
    /*$("#sortable").sortable({
      revert: true
    });*/
    $("#draggable").children().draggable({
      connectToSortable: ".column",
      helper: "clone",
      revert: "invalid"
    });
    $("ul, li").disableSelection();
  });

  $(function() {
    $(".column").sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all",
      receive: function(ev, ui) {
        ui.item.removeAttr("style");
        newId = parseInt($('#max_div').val())+1;
        $('#max_div').val(newId);
        console.log(newId,'div_'+newId);
        ui.item.attr('id', 'div_'+newId);
        console.log(ui.item.attr('id'));
    }
    });

    $('#sortable').find(".portlet")
      .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header")
      .addClass("ui-widget-header ui-corner-all")
      .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
	  
    $("#draggable").find(".portlet")
      .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header")
      .addClass("ui-widget-header ui-corner-all")
     .prepend( "<span class='ui-icon ui-icon-plusthick portlet-toggle'></span>")


    $(".portlet-toggle").on("click", function() {
      var icon = $(this);
      icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
      icon.closest(".portlet").find(".portlet-content").toggle();
    });
  });