jquery - 过滤堆叠元素的多个放置处理程序中断

Question

我有一些<div>设置为 droppable 的元素可以接收从图库中拖放到其上的缩略图。 <img>元素也被设置为接受这些缩略图，因此我可以在图像之上添加图像。放置处理程序从缩略图中恢复图像并将其附加到正文中。

当多个 div 和 imgs 堆叠在一起并且拇指掉落在堆栈上时，就会出现问题。当拇指被放下并且想要将拇指处理成图像并将其附加到主体时，每个堆叠元素的放下处理程序都会被调用。结果是同一图像的多个副本。

如何在缩略图放置产生的所有中断中只处理一次缩略图放置，以便最终只得到一张图像？

谢谢

Answer 1

我在 jsfiddle ( http://jsfiddle.net/9M8gP/21/ ) 上创建了一个小型概念证明。快速分割:

processDroppedElement 搜索已删除元素的列表并选择适当的元素。显然，您可以自定义选择标准。处理事件后，它会适本地重置状态变量。

var processDroppedElement = function() {

    $("p").html("");

    var targetElement = null;
    var targetZ = -1;

    for (var i in droppedElements) {
        var element = droppedElements[i];
        var zOrder = $( element ).data("zOrder");
        if (zOrder && zOrder > targetZ) {
            targetElement = element;
        }            
    }

    if (targetElement) {
         $( targetElement )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "Dropped!" );
        droppedElement = null;
    }

    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });

    droppedElements = [];
};

这部分代码定义了用于管理删除元素并触发 processDroppedElement 函数的基本变量。

var droppedTimer;
var droppedElements = [];

var queueDroppedElement = function(element) {
    droppedElements.push(element);
}

drop 函数只是将元素排队并创建一个超时来启动处理逻辑。它会预先清除任何现有的超时，以确保该函数仅运行一次。这有点黑客攻击，但很实用

$( ".droppable" ).droppable({
  drop: function( event, ui ) {

      var myZorder = $( this ).data("zOrder");
      console.log("zOrder: " + myZorder);

      queueDroppedElement(this);

      clearTimeout(droppedTimer);
      droppedTimer = setTimeout(processDroppedElement, 50);
  }
});