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在这里也更新了小提琴