Mam sytuację jak w przykładzie: http://jsbin.com/ukamun/2/edit
Jak widać pierwszy obrazek bez problemu się porusza, drugi po chwyceniu jest obniżony o jedną wysokość a trzeci już o dwie. Jakiś pomysł co może być przyczyną? Po zmianie na position: absolute wszystko śmiga jednak zależy mi aby pozostało position:relative. Z góry dzięi.
0
1
Poczytaj o tym jak działa position: relative i zobacz co modyfikuje Twój skrypt javascript. To tak będzie. Możesz wyjaśnić dlaczego ma być relative? Może wystarczy nadać relative do elementu nadrzędnego (tu: <body>), a elementom absolute?
Edit: Widzę, że porada z ostatniego zdania nie hula - nie chce mi się ogarniać czego, najpierw wyjaśnij dlaczego wg Ciebie powinno to zostać jako relative?
BTW:
Używasz TYMCZASOWEJ właściwości -webkit-transform dostępnej tylko dla części przeglądarek kompletnie olewając inne przeglądarki + olewając nawet webkita, który kiedyś zostanie zaktualizowany i przestanie wspierać właściwość z prefixem i nie będzie działać już nigdzie - genialne podejście o.O
0
Użyłem z -webkit- ponieważ pracuję w chrome i robiłem to dla testów, publikując stronę używam prefixera do generowania właściwości dla wszystkich przegladarek. Z relative chodzi mi o to, że chcę aby te boksy były objęte jednym divem który będzie wyśrodkowany przez margin: auto, a dopiero względem tego opakowania będę sobie pozycjonował małe boxy na starcie. Chyba, że źle podchodzę do tematu to byłbym wdzięczny za wyjaśnienie.
1
Jest opcja albo użyć natywnego drag-and-dropa w html5 (ale to trochę zabawy w sumie jest), ew. może biblioteki z jQuery UI? Jak widać ona ogarnia takie tematy jak pozycjonowanie relatywne i nie ma dziwnych efektów:
http://jsbin.com/ukamun/5/
0
Okej dzięki, takie rozwiązanie mi wystarcza. A jeszcze pytanko, jestem w stanie sprawić aby nie cały div był uchwytem?
2
zajrzyj czasem do dokumentacji:
http://jqueryui.com/resources/demos/draggable/handle.html