2010-08-07 13 views
6

Mam plik SVG w znaczniku obiektu wyświetlana w komórce tabeli i chcę, aby SVG przeciągalne w komórce tabeli przy użyciu przeciągania JQuery. Kod - minus mylące bity w tagu, wygląda następująco:JQuery Draggable i <object> z SVG?

<div id="container"> 
<div id="box"> 
    <table align="center" border="1"> 
     <tr> 
      <td valign="middle">button</td> 
      <td valign="top" id="objtd"> 
       <div id="objdiv1"> 
        <object id="svgobject1">blah, blah</object> 
       </div> 
      </td> 
      <td valign="middle">button</td> 
     </tr>  

Gdybym się ustawić znacznik jak przyciągany, przeciągany nie działa. Jeśli zawijam znacznik w, i robię przeciągany, mogę przeciągnąć używając marginesu div, a nie samego SVG. Próbowałem ustawić uchwyt obiektu SVG w następujący sposób:

$('#objdiv1').draggable({ handle: '#svgobject1' }); 

ale również się nie udało.

Czy istnieje sposób na przeciągnięcie obiektu SVG przez kliknięcie i przeciągnięcie samego pliku SVG?

Przygotowałem przykład here w przypadku, który pomaga zobaczyć, o czym mówię.

Odpowiedz

8

Zawartość HTML nie wyświetla zdarzeń myszy na temat zawartości <object>. Skrypty na stronie mogą uzyskiwać dostęp do danych interakcji myszy, jeśli wtyczka odpowiedzialnie odpowiedzialna udostępnia je za pomocą niestandardowego interfejsu.

Proponuję zamieścić zawartość SVG jako część samej strony, zamiast używać <object>. Oznacza to, że musisz podać stronę jako application/xhtml+xml i dodać przestrzeń nazw dla elementów SVG. Example. Z wbudowanym SVG, elementy SVG reagują na zdarzenia myszy i mogą być skrypowane podobnie jak elementy HTML.

Wadą wbudowanego SVG jest to, że nie będzie działać na IE z wtyczką SVG. Ale potem nikt nie używał tej wtyczki przez lata, a IE9 będzie wspierał również wbudowaną SVG.

+0

Tego właśnie potrzebowałem wiedzieć. Dziękuję Ci! Próbowałem cię głosować, ale jestem noobem i nie mogę tego jeszcze zrobić. – linux4me

1

W moim przypadku (piszę tylko aplikację chrome, a moje SVG są w osobnym pliku) udało mi się zmienić tag obiektu na tag img z atrybutem type ustawionym na "image/svg + xml, "i atrybut src ustawiony na ścieżkę do mojego pliku svg, i to rozwiązało problem dla mnie.

Twój przebieg może się różnić w innych przeglądarkach, ale jeśli piszesz dla webkita, to podejście wydaje się działać.

+0

Tak, to podejście powinno działać dobrze we wszystkich najnowszych przeglądarkach (Opera, Chrome, Firefox, IE9 +). Zwróć uwagę, że pliki svg, do których odwołuje się img, nie mają włączonych skryptów i że niektóre przeglądarki wymuszają inne ograniczenia, np. Zasoby zewnętrzne wewnątrz svg nie są ładowane. –

Powiązane problemy