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

回答

相關問題