我正在構建一個可以在日間容器中拖動專案的可分類專案。天數會有所不同。當一個專案從一天拖到另一天時，我試圖獲取新一天的容器。我正在嘗試使用“接收”事件，但每次我從一天容器移動到另一個容器時，它都不會被觸發。
更新：當我將一個專案（任務）移動到新容器（天）時，它似乎會觸發，但如果我將這些專案移回原來的位置，它不會再次觸發。每次移動時我都需要它開火。我是否需要以某種方式告訴可排序的新 DOM？
這是我的 HTML：
.day {
margin: 10px 20px;
}
.task {
margin: 5px 0;
background-color: #CCC;
}
<div class="days-wrapper">
<div class="day" data-date="2022-10-04">
<div class="seperator">Day 1 </div>
<div class="task" data-id="1">Task 1</div>
<div class="task" data-id="2">Task 2</div>
<div class="task" data-id="3">Task 3</div>
</div>
<div class="day" data-date="2022-10-05">
<div class="seperator">Day 2</div>
<div class="task" data-id="4">Task 4</div>
<div class="task" data-id="5">Task 5</div>
<div class="task" data-id="6">Task 6</div>
</div>
</div>
這是我的 JS：
$(".day").sortable({
cancel: ".separator",
connectWith: ".day",
receive: function(e, ui) {
console.log(ui);
var id = $(this).find('div.task').data('id');
var day = $(this).closest('div.day');
var date = day.data('date');
console.log('moved item ' id ' to this date ' date);
/* this give orignal date */
}
}).disableSelection();
這是我的小提琴。
https://jsfiddle.net/2t84ypa0/1/
非常感謝任何幫助。
湯姆
uj5u.com熱心網友回復：
考慮以下：
https://jsfiddle.net/Twisty/cezufojL/
JavaScript
$(".day").sortable({
cancel: ".separator",
connectWith: ".day",
receive: function(e, ui) {
var id = $(ui.item).data('id');
var date = $(this).data('date');
console.log('Item ' id ' moved to date ' date); /* this give orignal date */
}
}).disableSelection();
這ui.item用于定位收到的專案。$(this)指的是接收專案的可排序物件。
在我的測驗中，它可以雙向作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511220.html