在我的代碼中，我想要動態的 div 和可拖動元素，我的問題是可拖動元素在滾動時沿著 div 的底部移動，我需要當我將它們拖到 div 上時它們在滾動頁面時不會移動。
代碼jsFiddle
$(".signatureImage").on("mousedown mouseup", function(e) {
}).draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
//helper: "clone",
grid: [5, 5],
zIndex: 1000,
drag: function(event,ui){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
},
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: ' finalxPos ' - ' finalyPos);
jQuery.post("ajaxs/",
{
finalxPos: finalxPos,
finalyPos: finalyPos,
}, function(data)
{});
}
}).each(function(i, item){
});
拖動div里面的元素，然后使用containerDocuments div的滾動，你會看到可拖動的元素是隨著滾動移動的
uj5u.com熱心網友回復：
考慮以下示例。
小提琴：https ://jsfiddle.net/Twisty/n5yrtou1/16/
JavaScript
$(function() {
$(".signatureImage").draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
grid: [5, 5],
zIndex: 1000,
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: ' finalxPos ' - ' finalyPos);
}
});
$("#containerDocuments").droppable({
drop: function(e, ui) {
var el = ui.helper.detach();
el.css({
top: "",
left: "",
position: "absolute",
"z-index": 1000
}).appendTo(this).position({
my: "center",
at: "center",
of: e
});
}
});
});
使用 Droppable，您可以分離 Draggable 元素并將其附加到您的 DIV。然后是定位它的問題。你可以通過許多不同的方式來做到這一點，但我選擇將它基于事件。
最初，使用您的代碼，當您拖動它并停止時，它會根據與其父級的相對位置給出一個頂部和左側位置。放下它時，新位置必須相對于新目標元素。你可以用 來做到這一點.offset()，但它很復雜。
這允許用戶將一個元素從右側拖到影像上，它附加，現在當用戶滾動時，影像與 DIV 的其余部分一起滾動。
看更多：
- https://jqueryui.com/droppable/
- https://jqueryui.com/position/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/497116.html