JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {

        $(".item").draggable({
          axis:"x",
          scroll:true,
          revert:"invalid",
          snap:".items",
          snapMode:"inner"
	});

	$(".items").droppable({
          accept:".noSuchItem"
	});
      });
    </script>

  <body>
    <div>
      <table>
	<tbody>
          <tr>
            <td class="object">1</td>
            <td class="items ui-droppable">1/1</td>
            <td class="items ui-droppable">1/2</td>
            <td class="items ui-droppable">1/3</td>
          </tr>

          <tr>
            <td class="object">2</td>
            <td class="items ui-droppable">2/1</td>
            <td class="items ui-droppable">
              <div class="item ui-draggable ui-draggable-handle">2/2</div>
            </td>
            <td class="items ui-droppable">2/3</td>
          </tr>
	</tbody>
      </table>
    </div>
  </body>

CSS

* {
  font-family:sans-serif;
  font-size:9pt;
}

table td.items {
  text-align:left;
  vertical-align:top;
  border:1.1px solid lightgray;
}