jquery UI draggable i CSS rotate

0

Robię dla klienta pewną aplikację do projektowania kart magnetycznych, w której można na "czystej karcie" (zwykły DIV o określonych wymiarach i borderze) nakładać obrazki i akapity z tekstem oraz je przemieszczać za pomocą jQuery UI draggable. Problem w tym, że klient chce móc obracać tymi elementami. Do ich obracania napisałem prostego plugina, który zmienia właność CSS rotate:

$.fn.rotate = function()
    {
        return this.each(function(index,element){
            
            if(typeof $(element).attr('data-rotation')=='undefined')
                var rotation = 45;
            else
                var rotation = parseInt($(element).attr('data-rotation'))+45;
            
            if(rotation>=360) rotation=0;
                
            $(element).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                         '-moz-transform' : 'rotate('+ rotation +'deg)',
                         '-ms-transform' : 'rotate('+ rotation +'deg)',
                         'transform' : 'rotate('+ rotation +'deg)'}).attr('data-rotation',rotation);
        });
    }

Wszystko byłoby cacy, ale jeśli mamy np. akapit o długości np. 100px i do obrócimy o 90 stopni to nie da się go już dosunąć do prawego rogu "czystej karty"; jest odsunięty od niej właśnie o 100px (bo przeglądarka zdaje się tylko wyświetla akapit obrócony, a w rzeczywistości jest on zwykły, poziomy). Jakieś pomysły jak to obejść? Sprawdziłem kilka pluginów w jQuery do obracania i wszystkie działają na zmianie CSSa.

0

Może zrobić to na warstwach, czyli na samym spodzie mamy plansze do edycji nieograniczoną niczym a na górnej warstwie mamy ramkę i po środku okienko które nam "ogranicza" wielkość karty. Innymi słowy zastąpienie diva okienkiem.

0

Tylko, że to rozwiązanie spowoduje, że użytkownik będzie mógł dowolny element wyrzucić za obszar widzialny, a chodzi właśnie o to, żeby border "czystej karta" był ograniczeniem.

0

Może wrzucić ale co to ci zmienia? wrzucasz to potem i poprzez GD tworzysz obrazek obcinając to co wystaje poza obszar, daje to większe możliwość w zabawie w tym edytorku.

0

No dobra, skoro nikt nie ma lepszego pomysłu to chyba najlepsza opcja.

Mam jeszcze drugie pytanie: czemu po podpięciu tego pluginu, który wkleiłem u wcześniej oś obrotu obrazka (akapitu też i pewnie wszystkiego) znajduje się w lewym górnym rogu, a nie w środku?

EDIT: znalazłem rozwiązanie, co do tego plugina, wystarczy nadać dodatkowo transform-origin na 50% 50%

1 użytkowników online, w tym zalogowanych: 0, gości: 1