Geek asks and answers

Filtering multiple interrupt handler interrupts for stacked items

I have several items <div>configured with droppable to get thumbnails of thumbnails dragging them from the gallery. Elements are <img>also configured to accept these sketches, so I could have an image on top of the image. Crop handlers restore an image from a thumbnail and attach it to the body.

The problem arises when there are several divs and imgs stacked on top of each other and the thumb falls on the stack. A drop handler for each of these stacked items is called when the thumb is discarded and wants to process the thumb in the image and add it to the body. The result is multiple copies of the same image.

How can I process a sketch snapshot in just one go for all the interrupts that the frame generates, so I only get one image?

thank

+3
source share
2 answers

I created a little proof of the jsfiddle concept ( http://jsfiddle.net/9M8gP/21/ ). Quick crash:

processDroppedElementSearches for a list of discarded items and selects the appropriate item. Obviously, you can customize your selection criteria. After processing the event, it resets state variables accordingly.

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 = [];
};

This section of code defines the main variables used to manage the discarded items and run the function 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);
  }
});
+3

, . , .

, , , , , . , . , , :

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

, , , . , . 10 , z- .

, , .

0

More articles:


All Articles