jQuery UI-以編程方式將拖放的可拖動對象移動到另一個“可用”的可放置對象

Question

我有一個迷你表單控件，可在其中將幾個可拖動對象拖動到刻度上。 見我的朋克

理想情況下，每當我拖放一個可拖動對象時，我都想在stop( event, ui )方法中執行以下操作：

1. 檢查droppable是否已經具有可拖動對象（我們將其稱為draggable2）
2. 如果有draggable2，我想掃描我的droppables中沒有可拖動的對象
3. 然后將draggable2移至該droppable

是否有API /方法以編程方式執行此操作？ 我知道這聽起來與sortables類似，但我嚴格在尋找能夠

將可拖動對象移動到可放置對象

和

知道可放置對象是否已具有可拖動對象，並能夠識別可拖動對象

任何幫助將不勝感激。 謝謝。

Answer 1

我找到了一種方法來實現這一目標。 盡管jQuery UI的Draggables / Droppables API沒有任何選項，但我設法通過添加唯一的“ id”屬性來跟蹤可拖動的對象和Droppables。

這是我處理以下問題的方法：

將可拖動對象移動到可放置對象

我的方法：找到目標可放置對象的坐標，並更新可拖動對象的css。

為了弄清楚哪個拖動器被拖動，哪個拖放器被接收，我添加了屬性dragger-id和dropper-id以便在放置事件期間可以識別它們：

drop: function( event, ui ){
  // Get the current dragger and dropper ID's
  dropperId = $(this).attr('dropper-id');
  draggerId = ui.draggable.attr('dragger-id');

  // ... more code
}

然后我根據可放置對象的值計算了拖動器的頂部和左側坐標。 為此，我使用了jQuery的offset()方法。

drop_x = $('.droppable').offset().left - $('.draggable').offset().left;
drop_y = $('.droppable').offset().top - $('.draggable').offset().top;

注意：由於可拖動對象相對於它們的開始位置定位，因此我必須進行差異計算。

最后，我設置top和left css值：

ui.draggable.css('top', drop_y+'px');  // y-axis
ui.draggable.css('left', drop_x+'px'); // x-axis

---

知道可放置對象是否已具有可拖動對象，並能夠識別可拖動對象

為此，我在droppable元素上創建了另一個屬性來跟蹤dragger-id值。 我將其稱為current-dragger以便它是唯一的，並且可以通過它查詢。 我使用-1作為默認值，表示“無拖動”。

我也在drop方法中分配了current-dragger ：

drop: function( event, ui ){
  // Get the current dragger and dropper ID's
  dropperId = $(this).attr('dropper-id');
  draggerId = ui.draggable.attr('dragger-id');

  // Remove current-dragger value from old dropper (-1 means no dragger)
  $('[current-dragger="' + draggerId + '"]').attr('current-dragger', '-1');

  // Update current-dragger on this dropper
  $(this).attr('current-dragger', draggerId);

  // ... more code
}

我想實際上沒有必要對DOM屬性進行更新，因此在產品中，我將跟蹤JavaScript映射對象內部的當前拖動器。

有關完整的工作示例， 請參閱我更新的插件