jQuery UI düşünülebilir - tolerans/açgözlülük beklendiği gibi çalışmıyor

Question

Sürüklenebilirleri sürüklediğimde, ötelemeyi içeren öğe tetiklenmeye devam ediyor (çünkü aynı zamanda düşebiliyor), her ne kadar düşüyorsa ve her biri üzerine yığılmış olsalar bile diğer. Sualtıların arasında bir boşluk var gibi davranıyor ve bir tane yok.

an example on jsFiddle yaptık ve işte the screenshot of the offending behavior. Çalışıyorum, çünkü

Ben dolgu .parent eklersek

(örneğin padding: 0.2em 0.2em 0em 0.2em için davranış da kötü. Her şeyden

Answer 1

Birincisi, umarım bu ay içinde bir çözüm buldum, ben bu cevap veriyorum jQueryUI ile bu dönemde ve ben bir cevap bulmaya çalışmak için iyi bir egzersiz olacağını düşündüm.Ayrıca, cevapsız sorular nefret ediyorum^_^

Ne yazık ki, gerçekten bu tarayıcılar gibi bu .child elemanları arasında tepki verir gibi görünüyoriçin *over olayları tetiklemeye yetecek kadar yer var. Benim geldiğim tek fikir,olup olmadığını tespit etmeye çalışmaktır.olayları ebeveyn üzerinde tetiklenir, fare pozisyonu aslında bir çocuk elemanının içinde bulunur. Eğer öyleyse, accepting_drops sınıfını ebeveyn yerine alt öğeye vermelisiniz.

$('.dragme').draggable({ 
    helper: 'clone' 
}); 

$('.parent,.child').droppable({ 
    greedy: true, 
    tolerance: 'pointer', 
}); 

$(".parent").on("dropover", function(event, ui) { 
    var first = $(".child:first"); 
    var last = $(".child:last"); 

    if((event.originalEvent.pageX > first.offset().left) && 
     (event.originalEvent.pageY > first.offset().top) && 
     (event.originalEvent.pageX <= (last.offset().left + last.width())) && 
     (event.originalEvent.pageY <= (last.offset().top + last.height()))) { 
     $(this).removeClass("accepting_drops"); 
    } 
    else { 
     $(this).addClass("accepting_drops"); 
     $(".child").removeClass("accepting_drops"); 
    } 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

$(".child").on("dropover", function() { 
    $(".parent").removeClass("accepting_drops"); 
    $(".child").removeClass("accepting_drops"); 
    $(this).addClass("accepting_drops"); 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

JavaScript

HTML ve CSS değiştirilmemiş, bu yüzden tekrar

kopyalamak olmaz: Burada

kodu (eyleme geçtiğini benim çözüm göstermek için jsFiddle yapılan) var Sürüklenebilir bileşenin varsayılan davranışını geçersiz kıldığımız için hoverClass: 'accepting_drops' satırını kaldırdım. Ebeveyn div için dropover olayı tetiklendiğinde, aynı zamanda bir alt öğenin içerisindeyim, accepting_drops sınıfını buradan kaldırırım, aksi takdirde onu kaldırabilen herhangi bir alt öğeden kaldırırım ve onu ana bilgisayara eklerim. Bir dropout olayı tetiklendiğinde, accepting_drops sınıfını kaldırırım. Çocuk için

, davranış dropover olayı ben diğerlerinden accepting_drops sınıfını kaldırmak ve bunu kaldırmak bir dropout olaya, çocuğa ekleyebilir neredeyse standarttır.

Davranış hala biraz garip, ama bu geçici çözüm hile yapmalı.