Multi Row Draggable

by chrisloughnane

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class='wrapper-outer'>
<div class='wrapper-inner dropzone'>EDIT DROP</div>
<div>
<ul class="sortable">
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
</ul>
</div><div>
<ul class="sortable">
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
</ul>
</div><div>
<ul class="sortable">
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
<li class="icons"><img src="https://picsum.photos/50/50"></li>
</ul>
</div>
</div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}
.wrapper-outer {
  text-align: center;
}
.wrapper-inner {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  border: 1px solid black;
  line-height: 20px;
  padding: 15px
}

ul {
    list-style-type: none;
}
li.icons {
    display: inline-block;
    margin: 0 2em 1em 0;
    cursor: pointer
}

JavaScript

$( document ).ready(function() {

$('.sortable').sortable({
			connectWith: '.sortable',
			start: function (event, ui) {
      	ui.item.startPos = ui.item.index();
			},
			stop: function (event, ui) {
      	alert(
					'Start position: ' +
						ui.item.startPos +
						' New position: ' +
						ui.item.index()
				);
      },
      revert: function(item) {
     		//I have not been able to revert
        return true;
      }
		});
    $( ".dropzone" ).droppable({
      drop: function( event, ui ) {
        alert('Dropped, but doesn\'t return to start position')
      }
    });
});