SORU
18 AĞUSTOS 2011, PERŞEMBE


HTML5 dragleave bir çocuk üzerinde gezinirken ateş elementi

Yaşıyorum sorun bir öğe dragleave olay bu öğenin alt öğe üzerinde gezinirken ateş etti. Ayrıca, dragenter ana öğe yine gezinip geri geldiğinde tetiklenir.

Ben basit bir keman yaptı: http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

aşağıdaki JavaScript: ile

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

Yapması gereken bir şey var sürüklemeyi bırak div kırmızı yaparak kullanıcıya bildirme. Bu çalışır, ama eğer p çocuğun içine sürüklerseniz, dragleave ateş ve div kırmızı değil artık. Geri bırakmak için hareket div de kırmızı bir daha yapmaz. Gerekli tamamen bırakma div çık ve tekrar kırmızı yapar.

Alt öğe içine sürüklerken ateş dragleave önlemek mümkün mü?

CEVAP
8 Ocak 2014, ÇARŞAMBA


Sadece bir referans sayaç tutmak, bir dragenter gittiğinizde artış, dragleave alınca indirim gerekiyor. Sayaç 0 - sınıfı kaldırın.

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter  ;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

here çalıştırabilirsiniz

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Gee Cee

    Gee Cee

    1 AĞUSTOS 2009
  • jedimasterkyle

    jedimasterky

    11 ŞUBAT 2006
  • knopik96

    knopik96

    7 Mayıs 2011