當放置使用 jQuery UI 實現的可拖動項目時，有沒有辦法定義可拖動項目的哪一部分用于確定放置目標位置/元素？例如，我正在由 100x25 單元格組成的表格中移動 100x100 div?，F在，目標單元格似乎是由輔助 div 的中心確定的。我希望目標單元格是 div 頂部的單元格。這是一個日歷視圖，其中表的列是天，行是時間。div 代表一個事件，其高度可以根據事件的長度而變化。重要的是，當拖動事件時，用戶知道它將放置在哪里，以便時機正確。目前，如果用戶刪除一個 2 小時的事件，使頂部位于 08:00，則目標單元格最終將成為 09:00 的單元格。我可以在拖動視覺輔助元素時將其變小以幫助定位，但我更愿意保持其全尺寸。視覺輔助（代表事件的黑框）：我當前的實現：$(this).draggable({snap: 'td.dropTd', snapTolerance: "10"})編輯：這是一個代碼示例。控制臺打印元素被放置到的單元格。 https://jsfiddle.net/akrzpvb2/2/
1 回答
GCT1015
TA貢獻1827條經驗 獲得超4個贊
考慮以下代碼。
示例： https: //jsfiddle.net/Twisty/r8h0asL3/4/
JavaScript
$(function() {
for (var i = 1; i < 11; i++) {
$('tbody').append('<tr><td id="a-' + i + '""></td><td id="b-' + i + '""></td></tr>');
}
$('.dragDiv').draggable({
containment: $("tbody"),
snap: 'td',
snapMode: 'inner',
snapTolerance: "15"
});
$('tbody td').droppable({
accept: '.dragDiv',
drop: function(event, ui) {
ui.draggable.css({
top: "",
left: ""
}).appendTo(this);
}
});
});
您可以在這里看到snap您嘗試的方法是正確的。我添加了containment這樣用戶就無法將其拖出計劃。
對于drop，我們需要刪除位置樣式，然后將其附加到放置目標。
展望未來，您可能會考慮將 DIV 浮動在表格上。通過這種方式，它可以“覆蓋”時間范圍，而不是作為單元格內的元素。
- 1 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消