我的问题是获取放置元素的位置。
我在stop:上使用.draggable选项来获取新职位。

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


拖动时,我想从其父元素中删除该元素,并将其附加到它的新父元素中。
我用.droppable

$('.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。
我猜droppable-drop在draggable-stop之前执行?

我该如何解决?
由于索引问题,我需要创建一个克隆。因此,我还需要删除/添加元素。

最佳答案

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

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();
  }
});


因此,您的代码没有任何外在错误,但要注意的一点是,函数外部的变量stopPosstopOff的定义。最后应该看起来像:

  $(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();
      }
    });
  });


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

10-05 21:07
查看更多