下降前检查。 jquery 拖放

Question

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

我只需要在代码相等时允许删除，例如 'Limone Salmone' 只能在 'Alessandro Manzoni' 附近删除，因为它们具有相同的代码 'SU5'.

上网查了一下，没有找到，自己也尝试过，但是完全没有效果。这就是为什么我决定在这里问。

这是对我的代码的改编，使其作为一个片段工作，在位于页面末尾的原始 bootstrap 代码中，我使用 PHP 来填充 tables，为此我只使用一个 '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>

这里放一个我用的table

<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 属性具有相同的值，则接受 draggable 元素。

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

下降前检查。 jquery 拖放

Check before drop. jquery drag and drop

javascript

jquery

drag-and-drop

jquery-ui-draggable

jquery-ui-droppable