jQuery 可拖放定位

Posted 2023-05-08

【中文标题】jQuery 可拖放定位

【英文标题】：jQuery Draggables and Droppables Positioning

【发布时间】：2011-02-07 05:26:00

【问题描述】：

我正在使用 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); 设置克隆的位置，但该位置是相对于身体的。

位置与 droppable 无关，这使得可拖动拖放到随机位置。总的来说，可拖放和可拖动的集成并不紧密。我想让它更流畅。

【参考方案1】：

我正在获取 body 的偏移量，然后从小部件克隆的偏移量中减去它。

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

有效！

【讨论】：

其中 droppableOffset 变量是 jQuery('#squeezePage #droppable').offset();

我花了很多时间寻找类似的解决方案。非常感谢。