拖放多個選定的卡片 || jQuery 用戶界面

Question

我有 2 列，每列有 3 張卡片，每張卡片都有一個復選框。
我的代碼以單獨拖放每張卡片的方式運行，但我想在一個動作中拖放多個選定/選中的卡片，並在卡片掉落時取消選中復選框。
查看實時示例或片段以實時預覽。

 $("#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>

Answer 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回調中完成所有這些。 該函數基本上知道查找已檢查的項目並將它們從源移動到目標。 然后刪除任何拖動樣式並取消選中項目。

如果您願意，可以使用helper構建一個反映所有選中項目的項目。

查看更多： https : //api.jqueryui.com/draggable/#option-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 事件/狀態恢復