过滤堆叠元素的多个放置处理程序中断 [英] Filtering multiple drop handler interrupts for stacked elements

问题描述

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

I have some <div> elements set up with droppable to receive thumbnail images that are dropped on them, dragged from a gallery. <img> elements are also set up to accept these thumbnails, so I could have an image on top of an image. The drop handlers recover the image from the thumbnail and and append it to the body.

当有多个div和img彼此叠放并且一个拇指放到堆栈上时，会发生问题.当拇指放下并希望将拇指处理成图像并将其附加到身体时，将调用这些堆叠元素中的每个元素的放下处理程序.结果是同一张图像的多个副本.

A problem occurs when there are multiple divs and imgs stacked on top of each other and a thumb gets dropped on the stack. The drop handler for each of these stacked elements gets called when the thumb is dropped and wants to process the thumb into an image and append it to the body. The result is multiple copies of the same image.

我如何只对缩略图生成的所有中断进行一次缩略图处理，以至于我只能得到一张图像?

How can I process the thumbnail drop just one time for all the interrupts that the drop generates so I end up with just a single image?

谢谢

推荐答案

我在jsfiddle上创建了一个小的概念证明(

I have created a small proof of concept on jsfiddle (http://jsfiddle.net/9M8gP/21/). A quick breakdown:

processDroppedElement搜索放置的元素的列表并选择适当的元素.您显然可以自定义选择标准.处理完事件后，它将适当地重置状态变量.

processDroppedElement searches the list of dropped elements and selects the appropriate element. You can obviously customize the selection criteria. After processing the event, it resets state variables appropriately.

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函数的基本变量.

This section of code defines basic variables used to manage dropped elements and firing the processDroppedElement function.

var droppedTimer;
var droppedElements = [];

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

放置函数只是将元素排队，并创建超时以启动处理逻辑.它会预先清除所有现有的超时，以确保该功能仅运行一次.这有点骇人，但功能强大

The drop function simply queues elements and creates a timeout to launch the processing logic. It pre-clears any existing timeouts to ensure the function is only run once. This is a bit of a hack, but functional

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

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

      queueDroppedElement(this);

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

这篇关于过滤堆叠元素的多个放置处理程序中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！