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');

这里的问题是，由于某种原因，“dragId”被传递到droppable的drop函数，总是变得相同，并且不是“dragger1”，“dragger2”应该是它。对于这两个div，它总是恢复为“dragger2”。

PS：我为每个功能创建一个droppable的原因是它们最终会为每个draggable设置不同的设置。

请参阅小提琴：here以获得更好的解释

Answer 1

感谢A. Wolff，我发现使用：

ui.draggable

在drop函数中，我可以得到拖动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"
 }
});

一个。沃尔夫还更新了小提琴here

jquery draggable / droppable作为一个函数

1 个答案: