我正在使用 jquery UI 和 jQuery draggable
,我的所有可拖动对象都使用 jquery clone 帮助器,并将 draggable 附加到 droppable 。
这是我的代码
$('#squeezePage #droppable').droppable({
tolerance: 'fit',
accept: '#squeezeWidgets .squeezeWidget',
drop: function(event, ui) {
var dropElem = ui.draggable.html();
var clone = $(dropElem).clone();
clone.css('position', 'absolute');
clone.css('top', ui.absolutePosition.top);
clone.css('left', ui.absolutePosition.left);
$(this).append(clone);
$(this).find('.top').remove();
$(this).find('.widgetContent').slideDown('fast');
$(this).find('.widgetContent').draggable({
containment: '#squeezePage #droppable',
cursor: 'crosshair',
grid: [20, 20],
scroll: true,
snap: true,
snapMode: 'outer',
refreshPositions: true
});
$(this).find('.widgetContent').resizable({
maxWidth: 560,
minHeight: 60,
minWidth: 180,
grid: 20,
});
}
});
我使用 .css('top', ui.absolutePosition.top);
和 css('left', ui.absolutePosition.left) 设置克隆的位置;
但位置是相对于 BODY 的。
该位置与可放置对象无关,这使得可拖动对象放置到随机位置。总体来说,可拖拽的整合并不紧密。我想让它更流畅。
最佳答案
我正在获取主体的偏移量,并从小部件克隆的偏移量中减去它。
clone.css('top', ui.position.top - droppableOffset.top);
clone.css('left', ui.position.left - droppableOffset.left);
它有效!
关于jQuery 可拖放定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2625873/