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

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