Katıştırılmış SVG'deki etkinlikleri sürükleyip bırakın?

Web sayfasındaki SVG öğelerinden sürükle ve bırak olayları alma olasılığı var mı?Katıştırılmış SVG'deki etkinlikleri sürükleyip bırakın?

Google Closure kitaplığını denedim, boşuna. I do not rağmen

Özellikle, herhalde, benim sayfa

<ul id = "list"> 
    <li class="item" id="item1">foo</li> 
    <li class="item">bar</li> 
    <li class="item">baz</li> 
</ul>

içeren Ve komut dosyası (Clojurescript/C2) Ardından

(let [items (select-all ".item") 
     lst (select "#list") 
     target (fx/DragDrop. lst nil)] 
    (dorun (map 
    (fn [item] 
     (let [source (fx/DragDrop. item nil)] 
     (. source (addTarget target)) 
     (. source (init)))) 
    items)) 
    (. target (init)))

Bir sürükleme görüntüsünü (hayalet) almak yapmak içeriyor sürükleme olaylarını almayı yönetmek SVG öğeleri için benzer kodu kullanarak

(on-raw "#item1" :dragstart (fn [e] (.log js/console (str "dragstart " e))))

yaparak, ben bile bir hayalet alamadım ...

Herhangi bir ipuçları?

Teşekkür

kaynak

2012-09-05 Rom1

Drag olaylar SVG Elements desteklenmez: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

Sürükleme olaylarını fare olaylarıyla başlatabilirsiniz, bkz. http://svg-whiz.com/svg/DragAndDrop.svg (kaynağa bakın).

kaynak

2012-09-05 19:10:30 Duopixel

Bunun standartların bir parçası olmadığını biliyorum, ancak birkaç tarayıcı bunu desteklemeye başlayacağını umuyordum ve/veya SVG için sürükle-bırak özelliğini içeren bir JS kütüphanesi mevcut olacaktı ... Örnek için teşekkürler! – Rom1

Opera, svg öğelerinde sürükleme olaylarını destekliyor (diğer HTML5 öğelerinde olduğu gibi). –

Gerçekten de öyle! Sorun şu ki benim kodum ya da C2 ya da Google kapatma ve Opera’nın çok iyi geçmediği anlaşılıyor (webkitMatchesSelector’la ilgili garip hatalar alıyorum ...). Diğer tarayıcıların uygun olup olmadığını biliyor musunuz? – Rom1

Her zaman bunu uygulayabilirsiniz. Temel olarak, eleman sürüklediğiniz başka birine dokunarak olup olmadığını kontrol etmek zorunda:

this.isTouching = function(element){ 
     if(this.x <= element.x && element.x <= (this.x + this.width) && 
      this.y <= element.y && element.y <= (this.y + this.height)){ 
      return true; 
     }else{ 
      return false; 
     } 
    };

Ve tüm tarayıcılarda çalışır. Umarım yardımcı olur :)

kaynak

2015-07-29 05:46:19

Katıştırılmış SVG'deki etkinlikleri sürükleyip bırakın?

cevap

İlgili konular