Jquery sürüklenebilir divs kimliği alınamıyor.

4 Cevap php

Nedense aşağıdaki komut attr ('id') kullanarak sürüklenebilir divs kimliği alamıyor, ancak sayfadaki diğer statik öğeler çalışır. Ben tamamen neden bu alışkanlık iş olarak karıştı ve herkes benim için bir çözüm varsa bu beni çok takdir ediyorum.

            $(document).ready(function(){
            //$(".draggable").draggable();
            $(".draggable").draggable({ containment: '#container', scroll: false });
            $(".draggable").draggable({ stack: { group: '#container', min: 1 } });


            $("*", document.body).click(function (e) {
                var offset = $(this).offset();// get the offsets of the selected div
                e.stopPropagation();
                var theId = $(this).attr('id');// get the id of the selceted div
                $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
                $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); //post x,y to php (and the id of the elemnt)
            });

            var req = function () {
                $.ajax({
                    url: "out.php",
                    cache: false,
                    success: function(html){
                        $("#stuff").empty().append(html);
                        var css_attr = html.split(",");
                        $('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px');
                    },
                    complete: function(){
                        req();
                    }

                    });
            };
            req();

        });

Not: Bu komut aşağıdaki JavaScript kaynaklara bağlıdır.

jquery.js

http://jqueryui.com/latest/ui/ui.core.js

http://jqueryui.com/latest/ui/ui.draggable.js

http://jqueryui.com/latest/ui/ui.droppable.js

4 Cevap

Şu anda herhangi bir dahil (çok very kötü, don't do this!) * ile DOM all elemanları, için tıklatma işleyicisi ekleyerek ediyoruz children bu draggables içinde.

Doğru .stopPropagation() , but it's likely a child bir .draggable Eğer kendisi sürüklenebilir değil, Týkladýðýnýz kullanarak köpüren gelen olay durduruyor. Ne istediğiniz aslında kendilerini bu gibi .draggable elemanı dinliyor:

$(".draggable").click(function (e) {
    var offset = $(this).offset(), 
        theId = this.id;
    e.stopPropagation();
    $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
    $.post("http://localhost/index.php", { id: theId, x: offset.left, y: offset.top });
});

Ben yukarıda olması gibi burada diğer değişiklikler id, this.id , and passing an object to $.post() serileştirme için güvenli aracılığıyla, doğrudan ulaşılabilir vardır.

Hatta yukarıdaki quite olsa, büyük olasılıkla stop sürükleyerek bu değiştirerek, konumunu göndermek için orada istediğiniz değil:

$(".draggable").click(function (e) {

Buna:

$(".draggable").bind("dragstop", function (e) {

... Veya jQuery (1.4.2 +) yeni sürümlerinde:

$(document.body).delegate(".draggable", "dragstop", function (e) {

Sizin tıklama fonksiyonu test sayfasındaki benim için çalışıyor. Eğer tıklama fonksiyonu altına 'e.stopPropogation ()' hattı hareket ise meraktan, bu farklı davranıyor?

* Ile dikkatli olun, biliyorsunuz, tüm varsa <div><p><span><a></a></span></p></div> bu eylem her eleman için ayarlandığı anlamına gelir, tüm anlamına gelir. Ben size tıkladığınız olmak istediklerini elde her zaman emin olmak için, sizin fonksiyonu etkilenmesi gerektiğini sınıfları veya etiket belirtmek istiyorum.

Eğer olsun, ve eğer o inşaat göremiyorum KİMLİK düşünüyorum nesnesi ile * yerine kodunuzu deneyin ..

Bu oldukça bariz görünebilir ama emin olduğunu seçilmesini aslında kimlikleri tüm unsurları olduğunu. Sizin (*) ile her şeyi dahil, o zaman bazı unsurlar kimlikleri yok olması muhtemeldir.

etiketler