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

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

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

如何针对缩略图下降产生的所有中断只处理一次，以便我最终只得到一张图像？

Thanks

我在 jsfiddle 上创建了一个小的概念证明（http://jsfiddle.net/9M8gP/21/ 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 函数只是将元素排队并创建超时来启动处理逻辑。它会预先清除任何现有的超时，以确保该函数仅运行一次。这有点hack，但是很实用

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

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

      queueDroppedElement(this);

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