下降前檢查。 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選項，如果 draggable 和 droppable 的data-code屬性具有相同的值，則接受可拖動元素。

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