當(dāng)放置使用 jQuery UI 實(shí)現(xiàn)的可拖動(dòng)項(xiàng)目時(shí)，有沒有辦法定義可拖動(dòng)項(xiàng)目的哪一部分用于確定放置目標(biāo)位置/元素？例如，我正在由 100x25 單元格組成的表格中移動(dòng) 100x100 div?，F(xiàn)在，目標(biāo)單元格似乎是由輔助 div 的中心確定的。我希望目標(biāo)單元格是 div 頂部的單元格。這是一個(gè)日歷視圖，其中表的列是天，行是時(shí)間。div 代表一個(gè)事件，其高度可以根據(jù)事件的長(zhǎng)度而變化。重要的是，當(dāng)拖動(dòng)事件時(shí)，用戶知道它將放置在哪里，以便時(shí)機(jī)正確。目前，如果用戶刪除一個(gè) 2 小時(shí)的事件，使頂部位于 08:00，則目標(biāo)單元格最終將成為 09:00 的單元格。我可以在拖動(dòng)視覺輔助元素時(shí)將其變小以幫助定位，但我更愿意保持其全尺寸。視覺輔助（代表事件的黑框）：我當(dāng)前的實(shí)現(xiàn)：$(this).draggable({snap: 'td.dropTd', snapTolerance: "10"})編輯：這是一個(gè)代碼示例。控制臺(tái)打印元素被放置到的單元格。 https://jsfiddle.net/akrzpvb2/2/
1 回答
GCT1015
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊
考慮以下代碼。
示例： 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這樣用戶就無(wú)法將其拖出計(jì)劃。
對(duì)于drop，我們需要?jiǎng)h除位置樣式，然后將其附加到放置目標(biāo)。
展望未來(lái)，您可能會(huì)考慮將 DIV 浮動(dòng)在表格上。通過(guò)這種方式，它可以“覆蓋”時(shí)間范圍，而不是作為單元格內(nèi)的元素。
- 1 回答
- 0 關(guān)注
- 156 瀏覽
添加回答
舉報(bào)
0/150
提交
取消