Question

我有一个迷你表单控件，我将几个拖动器拖到一个刻度上。见my plunk

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

检查droppable是否已经有可拖动（让我们称之为draggable2）
如果有draggable2，我想扫描我的droppables没有可拖动的
然后将draggable2移动到此droppable

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

将可拖动移动到可放置的

和

知道droppable是否已具有可拖动功能，并且能够识别可拖动的

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

Answer 1

我找到了实现这个目标的方法。虽然jQuery UI draggables / droppables API没有选项，但我设法通过添加唯一的“id”属性来跟踪draggables和droppables来跟踪它们。

以下是我接触以下内容的方法：

将可拖动移动到可放置的

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

为了确定哪个拖动器被拖动以及哪个吸管收到它，我添加了属性android:icon="@drawable/blah_blah"和dragger-id，以便我可以在放置事件期间识别它们：

dropper-id

然后我根据droppable的值计算了拖动器的顶部和左侧坐标。为此，我使用了jQuery的offset()方法。

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
}

注意：我必须进行差异计算，因为可拖动的位置相对于它们开始的位置。

最后，我设置了drop_x = $('.droppable').offset().left - $('.draggable').offset().left; drop_y = $('.droppable').offset().top - $('.draggable').offset().top;和top css值：

left

知道droppable是否已具有可拖动功能，并且能够识别可拖动的

为此，我在droppable元素上创建了另一个属性来跟踪ui.draggable.css('top', drop_y+'px'); // y-axis ui.draggable.css('left', drop_x+'px'); // x-axis值。我称之为dragger-id，以便它是唯一的，我可以通过它进行查询。我使用current-dragger作为我的默认值，意思是“没有拖拉机”。

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

current-dragger

我认为没有必要对DOM属性进行更新，所以在prod中我将跟踪JavaScript映射对象中的当前拖动器。

有关完整的工作示例see my updated plunk

jQuery UI - 以编程方式将删除的draggable移动到另一个“available”droppable

1 个答案: