SORTABLE CANCEL - #2

by dvanauken

HTML

<table>
  <tbody id='A'>
    <tr>
      <td>A1</td>
    </tr>
    <tr>
      <td>A2</td>
    </tr>
    <tr>
      <td>A3</td>
    </tr>
    <tr class="abc">
      <td>A4</td>
    </tr>
    <tr class="abc">
      <td>A5</td>
    </tr>
    <tr>
      <td>A6</td>
    </tr>
  </tbody>
</table>

<hr />

<table>
  <tbody id='B'>
    <tr>
      <td>B1</td>
    </tr>
    <tr>
      <td>B2</td>
    </tr>
    <tr>
      <td>B3</td>
    </tr>
  </tbody>
</table>

CSS

tr.abc > td {
  border: 1px solid red;
  padding: 10px;
  background: pink;
  color: black;
  cursor: move
}

tr > td {
  border: 1px solid violet;
  padding: 10px;
  background: lightgreen
}

.ui-draggable-dragging {
   border: 1px solid gray;
   background-color: red;
   width: 500px;
}

.ui-placeholder {
   background-color: yellow;
   padding-right: 10px;
   height: 30px;
}

JavaScript

$('#A').sortable({
  revert: true,
  axis: 'y',
  connectWith: '#B',
  'start': function(event, ui) {
  	ui.placeholder.html("<td>X</td>")
	}
});
$('#B').sortable({
  revert: true,
  connectWith: '#A',
  receive: function(event, ui) {
    if (!ui.item.hasClass('abc')) {
      $(ui.placeholder).addClass('ui-state-error');
      $(ui.sender).sortable('cancel');
    }
  }
});