jQuery Draggables和Droppables定位

我正在使用jquery UI和jQuery draggable ，我的所有draggable都使用jquery clone helper并将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('top', ui.absolutePosition.top); 和css('left', ui.absolutePosition.left); 但这个位置是相对于BODY的。

该位置与droppable无关，这使得可拖动的下降到随机位置。 总体而言，可投放和可拖动的集成并不紧张。 我想让它更顺畅。

Answer 1

我正在获取正文的偏移量并从小部件克隆的偏移量中减去它。

  clone.css('top', ui.position.top - droppableOffset.top); clone.css('left', ui.position.left - droppableOffset.left); 

有用！