Jquery可拖动&可丢弃事件委派:stop&滴

Jquery draggable & droppable event delegation: stop & drop

本文关键字：amp stop 委派 拖动 Jquery 事件      更新时间：2024-03-28

我的问题是获取被丢弃元素的位置
我使用.draggable上的stop:选项来获得新职位

$('.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没有定义
我猜可滴管在可拖动停止之前执行

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

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

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}对象的辅助对象的"位置"answers"偏移"。以后在滴管中附加辅助对象时可以使用这些。

$('.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和stopOff的定义。最后它应该看起来像：

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

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

相关文章：