如何使用jQuery UI实现勾选卡片批量拖拽且放下后自动取消勾选？

需求说明 #

现有两列布局，每列包含3张带checkbox的卡片，原有代码仅支持单张卡片独立拖拽，需要实现两个核心功能：

• 支持一次性拖拽移动所有已勾选的卡片
• 卡片完成拖拽放下操作后自动取消对应checkbox的勾选状态

完整实现代码 #

HTML代码 #

<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 left-container">
    <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 right-container" 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>

CSS代码 #

.card{
  width:80px;
  height:80px;
  color:#fff;
  position: relative;
}
.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;
}

JS代码 #

// 初始化所有卡片可拖拽
$(".card").draggable({
  revert: true,
  opacity: .5
});

// 左右两个容器都可放置，支持双向拖拽
$(".left-container, .right-container").droppable({
  accept: ".card",
  drop: function( event, ui ){          
    // 收集所有已勾选的卡片
    const checkedCards = $("input.form-check-input:checked").closest(".card");
    const targetContainer = $(this);
    
    // 批量移动所有选中卡片到目标容器
    checkedCards.each(function(){
      const card = $(this);
      targetContainer.append(card.clone().removeAttr('style'));
      card.remove();
    });
    
    // 自动取消所有checkbox的勾选状态
    $("input.form-check-input").prop("checked", false);
  }
});

实现逻辑说明 #

• 给左右两个列容器都设置为droppable接收区域，支持双向拖拽卡片
• drop事件触发时，不单独处理当前拖拽的卡片，统一收集所有已勾选的卡片批量移动
• 所有卡片移动完成后，全局取消所有checkbox的勾选状态，满足操作后自动取消勾选的需求

内容的提问来源于stack exchange，提问作者Yousef Salama