Przeciąganie i upuszczanie zdarzeń w osadzonym SVG?

Czy istnieje możliwość odbierania zdarzeń przeciągania i upuszczania z elementów SVG na stronie internetowej?Przeciąganie i upuszczanie zdarzeń w osadzonym SVG?

Próbowałem biblioteki Google Closure, bezskutecznie.

szczególności, że moja strona zawiera

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

A mój skrypt zawiera (Clojurescript/C2)

(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)))

Następnie zrobić uzyskać obraz przeciągnięcie (ducha), choć nie wiem udaje się odbierać zdarzenia przeciągania, np wykonując

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

Korzystanie podobny kod do elementów SVG, ja nawet nie dostać ducha ...

Wszelkie wskazówki?

Dzięki

Źródło

2012-09-05 Rom1

Drag zdarzenia nie są obsługiwane w SVG elementów: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

Możesz symulować zdarzenia przeciągania za pomocą zdarzeń myszy, zobacz http://svg-whiz.com/svg/DragAndDrop.svg (zobacz źródło).

Źródło

2012-09-05 19:10:30 Duopixel

Wiem, że to nie jest część normy, ale miałem nadzieję, że kilka przeglądarek zacznie ją wspierać, i/lub że biblioteka JS obejmująca przeciąganie i upuszczanie dla SVG będzie dostępna ... Dzięki za przykład! – Rom1

Opera obsługuje zdarzenia przeciągania elementów svg (tak samo, jak w przypadku innych elementów HTML5). –

Rzeczywiście tak jest! Problem polega na tym, że mój kod, C2, czy Google zamknięcie i Opera nie wydają się dobrze ze sobą współpracować (dostaję dziwne błędy związane z 'webkitMatchesSelector' lub czymś ...). Czy wiesz, czy inne przeglądarki pójdą w ich ślady? – Rom1

Zawsze można go zaimplementować. Zasadniczo, podczas przeciągania musisz sprawdzić, czy element dotyka innego:

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

Działa we wszystkich przeglądarkach. Mam nadzieję, że to pomaga :)

Źródło

2015-07-29 05:46:19

Przeciąganie i upuszczanie zdarzeń w osadzonym SVG?

Odpowiedz

Powiązane problemy