2017-11-29 20 views
5

Próbuję udostępnić powiększanie przewijania. Mam jeden #mainDiv z wieloma tabelami .foo wewnątrz z punktami końcowymi jsPlumb. Gdy użytkownik przewinie się, #mainDiv powinien pozostać w tym samym rozmiarze, a tabele powinny zmieniać rozmiar, co faktycznie ma miejsce, ale punkty końcowe tabeli nie zmieniają swojego rozmiaru i miejsca. przyjrzeć się tej jsFiddle:Jak powiększać diagram jsPlumb

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

Fiddle jest dość duży, ale musimy tylko pierwszy funkcji javascript. Przeciągnij kilka elementów z prawej strony, dodaj nowy link i przewiń. tabele zmienią rozmiar, ale punkty końcowe pozostaną takie same. Jak mogę naprawić ten problem z punktami końcowymi?

Punkty końcowe nie są częścią tych tabel, ale są częścią biblioteki jsPlumb, która ma funkcję setZoom() dla swoich obiektów. Ta funkcja nie działa i chciałbym wiedzieć dlaczego. Złącza powinny również zmienić swoje miejsce.

Aplikacja musi również działać na urządzeniach dotykowych. Czy setZoom działa na powiększeniu zbliżeniowym dla urządzeń dotykowych i jak mogę to zaimplementować?

+0

Jeśli spojrzysz na renderowany kod HTML, przybliżenie zostanie zastosowane do tabeli treści, a punkty końcowe to elementy IMG poza tą tabelą. – Seano666

+0

@ Seano666 Rzeczywiście. Punkty końcowe nie są częścią tych tabel, ale są częścią biblioteki jsPlumb, która ma funkcję setZoom() dla jej obiektów. Ta funkcja nie działa i chciałbym wiedzieć dlaczego. To jest moje pytanie –

Odpowiedz

3

Aktualizacja:

Więc oparte na pytaniu, możemy po prostu użyć poniższy CSS albo rozpocząć skalowanie z lewej lub prawej strony w zależności od położenia elementów w kontenerze nadrzędnym.

Zmiana CSS jest potrzebna w kontenerze nadrzędnym, tak jak pokazano poniżej

#mainDiv { 
    display: inline-block; 
    width: 82%; 
    min-height: 100%; 
    box-sizing: border-box; 
    float: left; 
    position:relative; 
    margin: 0; 
    padding: 3px; 
} 

proszę wyewidencjonowania JSFiddle za rozwiązanie!

JSFiddle Demo

Old Odpowiedź:

jestem przy założeniu, że zoom dzieje w środku jest problem, ponieważ przybliżyć ze środka tabeli zawsze przekracza granice kontenera. Sugerowałbym dodanie poniższej klasy CSS, aby punkty końcowe zostały zachowane.

.elementTable{ 
    transform-origin: 0% 0%; 
} 

Poniżej znajduje się działający JSFiddle z implementacją.

JSFiddle Demo

Moje założenie może być nie tak, proszę wyjaśnić, co jej brakuje, a ja postaram się go rozwiązać!

+0

Dziękuję za odpowiedź. Chcę, aby punkty końcowe były automatycznie skalowane, gdy zmieni się skala tabeli (mogę to zaimplementować ręcznie), ale punkty końcowe powinny zmienić swoją lokalizację, powinny zawsze pozostać na granicach tabeli. –

+0

@VaxoBasilidze Dokonano zmiany, sprawdź teraz! –

+0

Punkty końcowe pozostają takie same ... –

Powiązane problemy