jQuery可拖動/可拖放功能

Question

我正在嘗試創建一個函數，以便在頁面中可以有多個拖放對象。 為此，我做了以下工作：

function apDrag(dragId,container) {
    $(function() {
          $('#'+dragId).draggable({ 
                revert: "invalid", 
                drag: function(e) {
                    var currentPos = $('#'+dragId).position();
                    $('#data').html('Left: '+currentPos.left+ ' Top: '+currentPos.top);
                }
            });
          $('#'+container).droppable({
            tolerance: 'fit',
            greedy: true,
            drop: function( event, ui ) {

                    // For some reason "dragId" defaults to "dragger2" here
                    // console.log(dragId); = dragger2; even though first function passes "dragger1" as dragId

                    $('#'+dragId).draggable({revert:"invalid"});
                    pos = $('#'+dragId).position();
                    cPosLeft = pos.left;
                    cPosTop = pos.top;
                    $('#data').html('Left: '+cPosLeft + ' Top: '+ cPosTop);
                    $('#'+dragId).html('ID: <b>'+dragId+'</b>');
                }
            });
      });
}
apDrag('dragger','container');
apDrag('dragger2','container');

這里的問題是由於某種原因，傳遞給droppable的drop函數的“ dragId”總是相同，而不是應有的“ dragger1”，“ dragger2”。 對於兩個div，它始終都還原為“ dragger2”。

PS：我為每個功能創建一個可放置對象的原因是，它們最終將對每個可拖動對象具有不同的設置。

請參閱小提琴： 這里有更好的解釋

Answer 1

感謝A. Wolff，我發現使用：

ui.draggable

在放置函數中，我可以獲取拖動的div的正確ID：

$('#'+container).droppable({
 tolerance: 'fit',
 greedy: true,
 drop: function( event, ui ) {
 var correctID = $(ui.draggable).attr("id");
 // id of dragged element is now "correctID"
 }
});

A. Wolff在這里也更新了小提琴