放下前检查。 jQuery拖放

Question

我是JQuery的初学者，我真的不知道该怎么做...

我仅在代码相等时才允许放置，例如，'Limone Salmone'只能在'Alessandro Manzoni'附近放置，因为它们具有相同的代码'SU5'。

我在网上搜索，但一无所获，我也尝试自己做某事，但这完全无效。这就是为什么我决定在这里问。

这里是我的代码的改编版，使其可以作为摘要使用，在页面末尾的原始引导程序代码中，我使用PHP填充表格，为此，我仅使用一个'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>

这里放了一张我用的桌子

<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

将属性添加到可拖放元素中，如下所示：

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

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

然后使用accept选项，如果可拖动和可拖放的data-code属性具有相同的值，请接受可拖动元素。

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