jQuery UI - 以编程方式将已放置的可拖动对象移动到另一个 "available" 可放置的对象

Question

我有一个迷你表单控件，我可以在其中将多个可拖动对象拖到一个比例尺上。参见 my plunk

理想情况下，每当我放下一个可拖动对象时，我都想在 stop( event, ui ) 方法中执行：

1. 检查 droppable 是否已经有一个 draggable（我们称之为 draggable2）
2. 如果有 draggable2，我想扫描我的 droppables 寻找一个没有 draggable
3. 然后将 draggable2 移动到这个 droppable

是否有 APIs/ways 以编程方式执行此操作？我知道这听起来类似于 sortables，但我 严格地 寻找

的能力

move a draggable to a droppable

和

to know if a droppable already has a draggable, and be able to identify the draggable

任何帮助将不胜感激。谢谢。

Answer 1

我找到了完成此任务的方法。尽管 jQuery UI draggables/droppables API 中没有任何选项，但我通过添加独特的 "id" 属性来跟踪它们，从而成功地跟踪了可拖动对象和可放置对象。

以下是我处理以下问题的方法：

move a draggable to a droppable

我的方法：找到目标droppable的坐标，更新draggable的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
}

然后我根据 droppable 的值计算了拖动器的顶部和左侧坐标。为此，我使用了 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

---

to know if a droppable already has a draggable, and be able to identify the draggable

为此，我在可放置元素上创建了另一个属性来跟踪 dragger-id 值。我将其命名为 current-dragger 以便它是唯一的并且我可以通过它进行查询。我使用 -1 作为我的默认值，意思是 "no dragger".

我也在 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 映射对象内的当前拖动器。

对于完整的工作示例，see my updated plunk