Check before drop. jquery drag and drop

Question

I am a beginer of JQuery and I really have not idea how to do that...

I need to permit the drop only when the codes are equals, for example 'Limone Salmone' can be dropped only near 'Alessandro Manzoni' because they have the same code 'SU5'.

I searched online but found nothing, I also tried to do something myself, but it was totally ineffective. That's why I decided to ask here.

Here is an adaptation of my code to make it work as a snippet, in the original bootstrap code located at the end of the page I use PHP to fill the tables and for that i use only one 'td'.

    $(function () {
      $(".tdDiD").draggable({
        appendTo: "body",

        helper: function (e) {
          $(this).css('color', 'black');
          $(this).css('color', 'black');
          return $("<div>", {
            class: "drag-helper"
          }).html($(e.target).text().trim());
        },
        revert: "invalid",
       // this : "disabled",
      });
      $(".tdSos").droppable({
        classes: {
          "ui-droppable-active": "ui-state-active",
          "ui-droppable-hover": "ui-state-hover"
        },
        drop: function (event, ui) {
          $(this).html(ui.helper.text());
          //$(e.target).css( "background-color", "yellow" );
        }
      });

    });

.drag-helper {
  border: 1px solid #dee2e6;
  padding: .75rem;
  vertical-align: top;
  box-sizing: border-box;
  color: #212529;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<section class="container-fluid row justify-content-between">
  <!--Table-->
  <div class="col table-responsive">
    <table class="table table-hover table-bordered w-auto" id="tabellaSos">
      <!--Table head-->
      <thead class="thead-dark">
        <tr>
          <th>#</th>
          <th>Surname</th>
          <th>Name</th>
          <th>Code</th>
          <th>Chosen</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Leopardi</td>
          <td>Giacomo</td>
          <td>SO2</td>
          <td class = "tdSos"></td>
        </tr>
        <tr>
          <th scope="row">1</th>
          <td>Manzoni</td>
          <td>Alessandro</td>
          <td>SU5</td>
          <td class = "tdSos"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--Table-->
  <div class="row justify-content-center">
    <!--Table-->
    <div class="col table-responsive">
      <table class="table table-hover table-bordered w-auto" id="tabellaSos">
        <!--Table head-->
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Code</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td id="draggable" class = "tdDiD">Limone Salmone</td>
            <td>SU5</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td class = "tdDiD">Giancarlo Patata</td>
            <td>SO2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!--Table-->
</section>

Here I put one table that I use

<div class="table-responsive col-md-4">
  <label for="tabellaDis">Tabella 1<label>
  <table class="table table-hover table-bordered w-auto" id="tabellaDid">
    <!--Table head-->
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th>Nome</th>
        <th>Codice</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <?php while($rowSos = $resultSos -> fetch_array(MYSQLI_NUM)): ?>
        <th scope="row"><?php echo $y;?></th>
        <td class="tdDiD"><?php echo $rowSos[2] . " " . $rowSos[1]; ?></td>
        <!--    <td><?php // echo $rowSos[1]; ?></td> -->
        <td><?php echo $rowSos[3]; ?></td>
      </tr>
      <?php $y++;?>
      <?php endwhile;?>
    </tbody>
  </table>
</div>

Answer 1

Add an attribute to your draggable and droppable elements like so:

<td class="tdSos" data-code="SU5"></td>

<td id="draggable" class="tdDiD" data-code="SU5">Limone Salmone</td>

Then use the accept option, if the draggable and droppable have the same value for their data-code attribute, accept the draggable element.

accept: function(el) {
    if(el.attr("data-code") == $(this).attr("data-code")){ 
            return true;
    }
},