5

私はjqueryUIとjQueryを使用draggableしていますが、すべてのドラッグ可能オブジェクトはjqueryクローンヘルパーを使用し、ドラッグ可能オブジェクトをドロップ可能に追加します。

これが私のコードです

 $('#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を基準にしています。

位置はドロップ可能に対して相対的ではないため、ドラッグ可能はランダムな場所にドロップされます。全体として、ドロップ可能とドラッグ可能な統合は緊密ではありません。スムーズにしたいです。

4

1 に答える 1

10

bodyのオフセットを取得し、ウィジェットクローンのオフセットから減算しています。

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

できます！

于 2010-04-13T11:45:16.937 に答える