jQuery Draggables和Droppables定位 [英] jQuery Draggables and Droppables Positioning

问题描述

我正在使用jquery UI和jQuery draggable，我的所有可拖动对象都使用jquery clone 助手，并将 draggable 附加到 droppable .

I'm using jquery UI and jQuery draggable, all my draggables use jquery clone helper and appends the draggable to 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的.

I'm setting the position of the clone with .css('top', ui.absolutePosition.top); and css('left', ui.absolutePosition.left); but the position is relative to the BODY.

该位置不是相对于可放置对象而言的，这使可拖动对象放置到随机位置.总体而言，可拖放式集成并不紧密.我想使它更平滑.

The position is not relative to the droppable which makes the draggable drop to random places. Overall, the droppable and draggable integration is not tight. I want to make it smoother.

推荐答案

我正在获取主体的偏移量，并将其从小部件克隆的偏移量中减去.

I'm getting the offset of body and subtracting it from the offset of the widget clone.

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

有效！

这篇关于jQuery Draggables和Droppables定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！