拖放前检查. 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;
}
},