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

I have a mini form control where I drag several draggables onto a scale. See my plunk

我有一个迷你表格控件,我将几个拖动器拖到刻度上。看我的插件

Ideally, whenever I drop a draggable, I would like to do in the stop( event, ui ) method:

理想情况下,每当我删除一个draggable时,我想在stop(event,ui)方法中执行:

1. check if the droppable already has a draggable (let's call it draggable2)

检查droppable是否已经具有可拖动功能(让我们称之为draggable2)

2. if there is draggable2, I would like to scan my droppables for one that does not have a draggable

如果有draggable2,我想扫描我的droppables没有draggable

3. then move draggable2 to this droppable

然后将draggable2移动到此droppable

Are there APIs/ways to do this programmatically? I know this sounds similar to sortables, but I am strictly looking for the ability to

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

move a draggable to a droppable

将一个可拖动的移动到一个可放置的

and

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

知道droppable是否已经具有可拖动性,并且能够识别可拖动的

Any help will be greatly appreciated. Thank you.

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

1 个解决方案

#1

I have found a way to accomplish this. Although there are no options from the jQuery UI draggables/droppables API, I have managed to track the draggables and droppables by adding unique "id" attributes to track them.

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

Here is how I approached the following:

以下是我如何处理以下内容:

move a draggable to a droppable

将一个可拖动的移动到一个可放置的

My approach: Find the coordinates of the target droppable, and update the css of the draggable.

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

To figure out which dragger was dragged and which dropper received it, I added attributes dragger-id and dropper-id so I could identify them during the drop event:

为了确定哪个拖动器被拖动以及哪个拖钓器接收到它,我添加了属性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
}

then I calculated the top and left coordinates for the dragger based on the droppable's values. For this, I used the jQuery's offset() method.

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

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

Note: I had to do a difference calculation since draggables are positioned relative to where they start.

注意:我必须进行差异计算,因为draggables相对于它们开始的位置。

Finally, I set the top and left css values:

最后,我设置了顶部和左侧的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

知道droppable是否已经具有可拖动性,并且能够识别可拖动的

For this, I created yet another attribute on the droppable elements to track the dragger-id values. I called it current-dragger so that it would be unique and I could query by it. I used -1 as my default value, meaning "no dragger".

为此,我在droppable元素上创建了另一个属性来跟踪dragger-id值。我称之为当前拖动器,以便它是唯一的,我可以通过它进行查询。我使用-1作为我的默认值,意思是“没有拖拉机”。

I assigned current-dragger in the drop method as well:

我也在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
}

I suppose there's really no need to do updates to the DOM attributes, so in prod I will be tracking the current dragger inside of a JavaScript mapping object.

我想没有必要对DOM属性进行更新,因此在prod中我将跟踪JavaScript映射对象中的当前拖动器。

For a full working example, see my updated plunk

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