拖放多个选定的卡片 || jQuery 用户界面答案

【问题标题】：Drag and drop multiple selected cards || JQuery ui拖放多个选定的卡片 || jQuery 用户界面
【发布时间】：2026-01-08 12:40:02
【问题描述】：

我有 2 列，每列有 3 张卡片，每张卡片都有一个复选框。
我的代码运行为单独拖放每张卡，但是我想在一个动作中拖放多张选中/选中的卡片，并在卡片掉落时取消选中复选框。
请参阅live example 或 sn-p 进行实时预览。

$("#card-list").droppable({
  accept: $(".card").draggable({
      revert: true,
      opacity: .5
    }),
  drop: function( event, ui ){          
    var dropped = ui.draggable;
    $(this).append(dropped.clone().removeAttr('style'));
    dropped.remove();
  }
});

.card{
  width:80px;
  height:80px;
  color:#fff;
}
.right-list{
  background-color: #B91646 !important;
}
.left-list{
  background-color: #1F1D36 !important;
}
.form-check-input{
  position:absolute;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  bottom:0 !important;
  margin:auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-6 d-flex flex-column align-items-center">
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
      
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
  <div class="col-6" id="card-list">
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

考虑以下内容。

$(function() {
  function moveChecked(source, target) {
    var items = $(".card", source).filter(function(index) {
      return $("input", this).is(":checked");
    });
    items.css({
      top: "",
      left: ""
    }).appendTo(target);
    $("input", items).prop("checked", false);
  }
  
  $(".card").draggable({
    revert: "invalid",
    opacity: .5
  });

  $("#card-list").droppable({
    accept: ".card",
    drop: function(event, ui) {
      moveChecked($(".row > .d-flex"), this);

    }
  });
});

.card {
  width: 80px;
  height: 80px;
  color: #fff;
}

.right-list {
  background-color: #B91646 !important;
}

.left-list {
  background-color: #1F1D36 !important;
}

.form-check-input {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-6 d-flex flex-column align-items-center">
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
  <div class="col-6" id="card-list">
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

首先，您不能以您尝试的方式使用accept。 Draggable 应该自己初始化。

我创建了一个函数，但如果您愿意，您可以在drop 回调中完成所有这些操作。该函数基本上知道查找 Checked 项目并将它们从 Source 移动到 Target。然后它会删除任何 Drag 样式并取消选中项目。

如果您愿意，可以使用helper 构建一个反映所有选中项目的项目。

更新

$(function() {
  function hideChecked(target) {
    var items = $(".card", target).filter(function(index) {
      return $("input.form-check-input", this).is(":checked");
    });
    items.fadeOut("fast");
  }

  function moveChecked(source, target) {
    var items = $(".card", source).filter(function(index) {
      return $("input", this).is(":checked");
    });
    items.css({
      top: "",
      left: ""
    }).appendTo(target);
    $("input", items).prop("checked", false);
    items.show();
  }

  function makeHelper(event) {
    var helper = $("<div>", {
      class: "helper"
    });
    var count = $("#check-list input:checked").length;
    for (var i = 0; i < count; i++) {
      var offsetPos = "left+" + (i * 10) + " top+" + (i * 10);
      $("<div>", {
        class: "card left-list"
      }).html("&nbsp;").appendTo(helper).position({
        my: offsetPos,
        at: "left top",
        of: helper
      });
    }
    $(".card:last", helper).append("<input class='form-check-input' type='checkbox' checked />");
    return helper.get(0);
  }

  $("#check-list .card").draggable({
    appendTo: ".row",
    revert: function(dragObj) {
      if (dragObj === false) {
        $("#check-list .card").show();
        return true;
      } else {
        return false;
      }
    },
    opacity: .5,
    helper: makeHelper,
    start: function(event, ui) {
      hideChecked($("#check-list"));
    }
  });

  $("#card-list").droppable({
    accept: ".card",
    drop: function(event, ui) {
      moveChecked($(".row > .d-flex"), this);
    }
  });
});

.card {
  width: 80px;
  height: 80px;
  color: #fff;
}

.right-list {
  background-color: #B91646 !important;
}

.left-list {
  background-color: #1F1D36 !important;
}

.form-check-input {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
}

.helper {
  position: relative;
}

.helper .card {
  position: absolute;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-6 d-flex flex-column align-items-center" id="check-list">
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card left-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
  <div class="col-6" id="card-list">
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
    <div class="card right-list mb-3">
      <input class="form-check-input" type="checkbox" value="" aria-label="...">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

参考：jQuery ui.draggable event/status on revert

【讨论】：