Javascript jquerydraggable&；可拖放的事件委派：停止&；滴

我的问题是获取被删除元素的位置。
我使用

.draggable

上的

stop:

选项获得新职位。

$('.elementsDiv').draggable({
  revert: 'invalid', //Revert when drop fails
  helper: 'clone', //Drag a clone
  stop: function() {
    //Dropped position.
    Stoppos = $(this).position();
  }
});

拖动时，我希望将元素从其父元素中移除，并将其附加到新父元素中。
我用

.dropable

$('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function (event, ui) {

        //get dragged element
        var draggedElement = $(ui.draggable);

        //get dropZone
        var dropZone = $(this); 

        //Remove element from list and append it to dropZone
        draggedElement.detach().appendTo(dropZone.position(Stoppos));

        //Make element draggable
        draggedElement.draggable();
    }
});

当我删除/追加时，新位置将位于左上角。
因此，我必须从

.draggable

中获取放置位置，并在

.droppable

放置函数中使用它来将元素移动到放置位置

这就是我的问题开始的地方
在控制台中，我得到：Stoppos未定义。
我猜在可拖动停止之前，可拖动停止执行

我如何解决这个问题？

---

由于索引问题，我需要创建一个克隆。因此，我还需要删除/追加元素。

我建议使用传递的函数的属性

var stopPos = {};
var stopOff = {};

$('.elementsDiv').draggable({
  revert: 'invalid', //Revert when drop fails
  helper: 'clone', //Drag a clone
  stop: function(e, ui) {
    stopPos = ui.position;
    stopOff = ui.offest;
    console.log(stopPos, stopOff);
  }
});

这将为您提供辅助对象的位置和偏移量，即

{top，left}

对象。您可以在以后将辅助对象附加到可拖放列表中时使用这些选项

$('.flakUp, .flakDown').droppable({
  accept: '.elementsDiv',
  drop: function (event, ui) {
    var draggedElement = $(ui.draggable);
    var dropZone = $(this); 

    //Remove element from list and append it to dropZone
    draggedElement.detach().appendTo(dropZone.position(stopPos));

     //Make element draggable
     draggedElement.draggable();
  }
});

因此，代码表面上没有问题，但请注意一件小事，就是函数外部变量

stopPos

和

stoppoff

的定义。最后，它应该是这样的：

  $(function(){
    var stopPos = {};
    var stopOff = {};

    $('.elementsDiv').draggable({
      revert: 'invalid', //Revert when drop fails
      helper: 'clone', //Drag a clone
      stop: function(e, ui) {
        stopPos = ui.position;
        stopOff = ui.offest;
        console.log(stopPos, stopOff);
      }
    });

    $('.flakUp, .flakDown').droppable({
      accept: '.elementsDiv',
      drop: function (event, ui) {
        var draggedElement = $(ui.draggable);
        var dropZone = $(this); 

        //Remove element from list and append it to dropZone
        draggedElement.detach().appendTo(dropZone.position(stopPos));

         //Make element draggable
         draggedElement.draggable();
      }
    });
  });

在这种方法中，变量可以由两者访问。如果仅在函数内部定义，则其他函数无法访问它