Question

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

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

如何为drop生成的所有中断处理缩略图丢弃一次，这样我最终只得到一个图像？

由于

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

Answer 2

我给了你与我一起思考的要点。不过，我认为可能有一种更简单的方式。

当拇指放在堆叠上时，接收拇指的元素按照元素出现在堆栈中的顺序从下向上触发放置处理程序。所以top元素最后会激活处理程序。所以我们只需要等到堆栈中的所有元素都触发，然后取出最后一个：

function box_drop(e,ui) {

    g.drop_last_e = e;
    g.drop_last_ui = ui;
    if(g.th) clearTimeout(g.th);      // if timer is running, cancel it
    g.th = setTimeout(box_drop_last, 10); // and start a new 10ms wait

}

function box_drop_last() {  
    // it's been 10ms since last drop: we surely must be done   
    e  = g.drop_last_e; 
    ui = g.drop_last_ui;

      // add image on top of this e/ui
}

在我的情况下，堆栈中也可能有图像，因此图像丢弃处理程序同时运行。我想我需要在这个处理程序中做同样的事情。在10ms结束时，两个处理程序都将处理堆栈中的所有内容，因此我可以检查每个处理程序看到的最后一个元素的z-index，并将放置的拇指放在其上面。

如果您有任何其他想法，请告诉我。

由于

Answer 3

事实证明，您可以调用event.stopPropagation()来防止这种情况发生（至少在Firefox中如此）。

完成此操作后，堆栈中只有最高的元素会接收到事件。

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

过滤堆叠元素的多个丢弃处理程序中断

3 个答案: