jQuery UI - 以编程方式将一个可拖放项移动到另一个可拖放"available"

Question

我有一个迷你窗体控件，可以将几个可拖动对象拖动到一个比例上。查看我的垃圾

理想情况下，每当我放下一个可拖动的东西时，我都想用stop( event, ui )方法：

1. 检查dropable是否已经有一个draggable（我们称之为draggable2）
2. 如果有可拖动2，我想扫描我的滴管，找一个没有可拖动的
3. 然后将draggable2移动到该滴管

有没有通过编程实现这一点的API/方法？我知道这听起来类似于排序表，但我正在严格地寻找的能力

将可拖动对象移动到可丢弃对象

和

了解可丢弃文件是否已经有可拖动文件，并能够识别可拖动文件

任何帮助都将不胜感激。非常感谢。

Answer 1

我已经找到了实现这一点的方法。虽然jQueryUIdraggables/dropablesneneneba API中没有任何选项，但我已经通过添加唯一的"id"属性来跟踪draggables和dropables。

以下是我如何处理以下问题：

将可拖动对象移动到可丢弃对象

我的方法是：找到目标dropable的坐标，并更新draggable的css。

为了弄清楚哪个dragger被拖动了，哪个dropper收到了它，我添加了属性dragger-id和dropper-id，这样我就可以在drop事件中识别它们：

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

---

了解可丢弃文件是否已经有可拖动文件，并能够识别可拖动文件

为此，我在可丢弃元素上创建了另一个属性来跟踪dragger-id值。我称它为current-dragger，这样它就会是唯一的，我可以根据它进行查询。我使用-1作为我的默认值，意思是"没有拖拉者"。

我在丢弃方法中也分配了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属性，所以在prod中，我将跟踪JavaScript映射对象内部的当前dragger。

有关完整的工作示例，请参阅我更新的plunk