JQuery UI Draggable Table

index.html

<table>
  <tr>
    <td class="droppable">
      <div class="draggable" id="d1">1</div>
    </td>
    <td class="droppable">
    </td>
    <td class="droppable">
      <div class="draggable" id="d2">2</div>
    </td>
  </tr>
  <tr>
    <td class="droppable">
    </td>
    <td class="droppable">
      <div class="draggable" id="d3">3</div>
    </td>
    <td class="droppable">
    </td>
  </tr>
  <tr>
    <td class="droppable">
      <div class="draggable" id="d4">4</div>
    </td>
    <td class="droppable">
      <div class="draggable" id="d5">5</div>
    </td>
    <td class="droppable">
      <div class="draggable" id="d6">6</div>
    </td>
  </tr>
</table>

jquery-ui-draggable-table.markdown

JQuery UI Draggable Table

Javascript solution to sorting an HTML table using JQuery UI sortable

A Pen by Marcel O'Neil on CodePen.

License.

script.js

var original = {};

function compress(droppable) {
  var dropIndex = $('td').index(droppable);
  $.each($('td:not(:has(.draggable:visible), .placeholder), td:has(.ui-draggable-dragging)'), function(index, value) {
    if ($('td').index(value) > dropIndex) {
      moveRight(droppable);
      return;
    }
  });
  moveLeft(droppable);
};

function moveRight(droppable) {
  var nextIndex = $('td').index(droppable) + 1;
  if (nextIndex > 8) {
    console.log(nextIndex);
    return;
  }
  $(droppable).children('.draggable:visible:not(.ui-draggable-dragging):last').detach().prependTo($('td').eq(nextIndex));
  if ($('td').eq(nextIndex).children('.draggable:visible:not(.ui-draggable-dragging)').length > 1) {
    moveRight($('td').eq(nextIndex));
  }
};

function moveLeft(droppable) {
  var nextIndex = $('td').index(droppable) - 1;
  if (nextIndex < 0) {
    console.log(nextIndex);
    return;
  }
  $(droppable).children('.draggable:visible:not(.ui-draggable-dragging):last').detach().prependTo($('td').eq(nextIndex));
  if ($('td').eq(nextIndex).children('.draggable:visible:not(.ui-draggable-dragging)').length > 1) {
    moveLeft($('td').eq(nextIndex));
  }
};

function revert() {
  $.each(original, function(key, value){
    if($('td').eq(value).children().length === 0  &&
      !$('td').eq(value).hasClass('placeholder')){
      $('#'+key).detach().prependTo($('td').eq(value));
      revert();
    }
  })
};

$('.draggable').draggable({
  placeholder: 'placeholder',
  zIndex: 1000,
  containment: 'table',
  helper: function(evt) {
    var that = $(this).clone().get(0);
    $(this).hide();
    return that;
  },
  start: function(evt, ui) {
    $.each($('.draggable:not(.ui-draggable-dragging)'), function(index, value) {
      original[value.id] = $('td').index($(value).parent());
    });
  },
  cursorAt: {
    top: 20,
    left: 20
  }
});

$('.droppable').droppable({
  hoverClass: 'placeholder',
  drop: function(evt, ui) {
    var draggable = ui.draggable;
    var droppable = this;

    $(draggable).detach().css({
      top: 0,
      left: 0
    }).prependTo($(droppable)).show();
  },
  over: function(evt, ui) {
    var draggable = ui.draggable;
    var droppable = this;
    revert();
    if ($(droppable).children('.draggable:visible:not(.ui-draggable-dragging)').length > 0) {
      compress(droppable);
    }
  }
})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

.droppable {
  width: 100px;
  height: 100px;
  background: grey;
  font-size: 15pt;
  font-family: Helvetical, Arial, sans-serif;
  color: white;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
}

.draggable {
  width: 100px;
  height: 100px;
  background: green;
}

.placeholder {
  background: red;
}