jQuery Draggables和Droppables定位

前端之家收集整理的这篇文章主要介绍了jQuery Draggables和Droppables定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用jquery UI和jQuery draggable,我的所有draggable都使用jquery clone helper并将draggable追加到droppable.

这是我的代码

  1. $('#squeezePage #droppable').droppable({
  2. tolerance: 'fit',accept: '#squeezeWidgets .squeezeWidget',drop: function(event,ui) {
  3. var dropElem = ui.draggable.html();
  4. var clone = $(dropElem).clone();
  5. clone.css('position','absolute');
  6. clone.css('top',ui.absolutePosition.top);
  7. clone.css('left',ui.absolutePosition.left);
  8. $(this).append(clone);
  9. $(this).find('.top').remove();
  10. $(this).find('.widgetContent').slideDown('fast');
  11. $(this).find('.widgetContent').draggable({
  12. containment: '#squeezePage #droppable',cursor: 'crosshair',grid: [20,20],scroll: true,snap: true,snapMode: 'outer',refreshPositions: true
  13. });
  14. $(this).find('.widgetContent').resizable({
  15. maxWidth: 560,minHeight: 60,minWidth: 180,grid: 20,});
  16. }
  17. });

我用.css(‘top’,ui.absolutePosition.top)设置克隆的位置;和css(‘left’,ui.absolutePosition.left);但这个位置是相对于BODY的.

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

最佳答案
我正在获取正文的偏移量并从小部件克隆的偏移量中减去它.

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

有用!

猜你在找的jQuery相关文章