JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div style="width:600px;height:360px;">
  <div style="float:left;">
    Set 1 : &nbsp;
  </div>
  <div>
    <ul id="sortable1" class="connectedSortable" style="border: 1px solid #000000;width:220px;height:300px;padding:4px;">
      <li class="ui-state-default" cust-attr="m">Item 1 Set 1 X</li>
      <li class="ui-state-default" cust-attr="m">Item 2 Set 1 X</li>
      <li class="ui-state-default">Item 3 Set 1 X</li>
      <li class="ui-state-default">Item 4 Set 1 X</li>
      <li class="ui-state-default">Item 5 Set 1 X</li>
    </ul>
    <ul id="sortable1x" class="connectedSortable" style="border: 1px solid #000000;width:220px;height:300px;padding:4px;">
      <li class="ui-state-default" cust-attr="m">Item 1 Set 1 Y</li>
      <li class="ui-state-default" cust-attr="m">Item 2 Set 1 Y</li>
      <li class="ui-state-default">Item 3 Set 1 Y</li>
      <li class="ui-state-default">Item 4 Set 1 Y</li>
      <li class="ui-state-default">Item 5 Set 1 Y</li>
    </ul>
  </div>
</div>
<div style="width:600px;height:360px;">
  <div style="float:left;">
    Set 2 : &nbsp;
  </div>
  <div>
    <ul id="sortable2" class="connectedSortable connectedSortablex" style="border: 1px solid #000000;width:220px;height:300px;padding:4px;">

    </ul>
    <ul id="sortable2x" class="connectedSortable connectedSortablex" style="border: 1px solid #000000;width:220px;height:300px;padding:4px;">

    </ul>
  </div>
</div>

CSS

#sortable1,
#sortable1x,
#sortable2,
#sortable2x {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}
#sortable1 li,
#sortable1x li,
#sortable2 li,
#sortable2x li {
  box-shadow: 2px 2px 0 #6D6D6D;
  cursor: pointer;
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 150px;
}
#sortable2 .ui-selecting,
#sortable2x .ui-selecting {
  background: #FECA40;
}
#sortable2 .ui-selected,
#sortable2x .ui-selected {
  background: #F39814;
  color: white;
}
#sortable1x,
#sortable2x {
  list-style-type: none;
  margin: 0;
  width: 60%;
}

JavaScript

$(function() {
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-state-highlight",
    //containment: "parent",
    revert: true
  }).disableSelection();
  $("#sortable2").sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui) {
      if (ui.item.attr('cust-attr') != 'm') {
        console.log('wrong element');
        $("#" + ui.sender.attr('id')).sortable('cancel');
      }
    }
  }).disableSelection();
  $("#sortable2x").sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui) {
      if (ui.item.attr('cust-attr') == 'm') {
        console.log('wrong element');
        $("#" + ui.sender.attr('id')).sortable('cancel');
      }
    }
  }).disableSelection();
});