jQuery用户界面 - 以编程方式将拖放到另一个“可用”droppble

我有一个迷你表格控件，我拖动几个拖动到一个规模。见my plunk jQuery用户界面 - 以编程方式将拖放到另一个“可用”droppble

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

检查是否可放开已经有一个可拖动（姑且称之为draggable2）
如果有draggable2，我想扫描我droppables一个不具有可拖动
然后移动draggable2这可放开

为T这里的API /方法以编程方式做到这一点？我知道这听起来很相似sortables，但我严格寻找能力

此举可拖动到可投放

和

知道可拖拽已具有可拖拽，并且能够识别可拖拽

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

来源

2015-12-11 Julian Soro

好吧，我是对的，那么这涉及一起使用和添加数据属性跟踪谁在这里可放开的下跌事件的组合接线的事情。工作时会提供答案 –

我找到了一种方法来实现这一点。尽管jQuery UI draggables/droppables API没有选项，但我通过添加唯一的“id”属性来跟踪可拖动和可拖放的属性，以便跟踪它们。

这里是我走近如下：

此举可拖动到可投放

我的方法：找到目标可投放的坐标，并更新了可拖动的CSS 。

要弄清楚哪些牵引被拖和滴管收到了，我添加的属性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 
}

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

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

注意：由于draggables相对于它们的起始位置，我必须进行差异计算。

最后，我设置了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作为我的默认值，意思是“没有拖拉机”。

我在滴法分配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

来源

2015-12-13 03:13:37

jQuery用户界面 - 以编程方式将拖放到另一个“可用”droppble

回答

相关问题