Basic jquery ui sortable connected lists

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
    <div class="row">
      <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
      </section>

      <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">

      </section>

      <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
      </section>
    </div>
    <div class="row">
      <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      </section>

      <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      </section>

      <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      </section>

      <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      </section>
    </div>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <section id="widgets-container" class="connectedSortable">
      <div class="widget">Widget A</div>
      <div class="widget">Widget B</div>
      <div class="widget">Widget C</div>
      <div class="widget">Widget D</div>
      <div class="widget">Widget E</div>
      <div class="widget">Widget F</div>
    </section>
  </div>
</div>

CSS

.connectedSortable {
    background: lightgrey;
    border: 1px solid grey;
    min-height:50px;
}
#widgets {
  height: 300px;
  background-color:#F0F8FF;
  
}
.ui-sortable-handle {cursor:move}

JavaScript

$(".connectedSortable").sortable({
	cursor: 'move',
	connectWith: ".connectedSortable",
  start: function(event, ui){
  	ui.item.startPos = ui.item.index();
  },
  receive: function(event, ui) {
    var source = ui.sender;
    var target = $(this);
    var draggedItem = ui.item;
    if(target.attr('id') !== 'widgets-container'){
    	if(target.find('div.widget').length >= 2){
        if(source.is('#widgets-container')){
          draggedItem.remove();
          if(ui.item.startPos === 0) {
          	source.prepend(draggedItem);
          }else{
          	source.children().eq(ui.item.startPos-1).after(draggedItem);
          }
          
          console.log(ui.item.startPos);
        }else{
        	var elementToSwap = target.find('div.widget').not(draggedItem)[0];
          source.html(elementToSwap);
          
        }
      }
      
    }   
   
  }
}).disableSelection();