Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Pozycjonowanie elementów DOM, Problem z ustawianiem kolejnych elementów względem rodzica
rozny
post
Post #1





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

Ostrzeżenie: (0%)
-----


Witam,

popełniłem skrypt do tworzenia kotwic na obrazie. Zasada działania jest taka, że klikając w dowolne miejsce na obrazie w klikniętym miejscu tworzony jest link i jednocześnie dwa inputy z koordynatami położenia kotwicy na obrazku. Można tworzyć dowolną ilość linków na zdjęciu. Niestety w tej chwili działa to tak, że pierwsza kotwica pozycjonowana jest prawidłowo, natomiast kolejne pozycjonują się względem ostatnio dodanego elementu. Niestety nie znam jQuery na tyle żeby wydedukować dlaczego tak się dzieje. Może ktoś mi zasugeruje gdzie jest błąd logiczny w moim skrypcie.

  1. $(function() {
  2.  
  3. $('#picture_container img').click(function(e){
  4.  
  5. var offset = $(this).offset();
  6. var x = e.pageX-$(this).offset().left;
  7. var y = e.pageY-$(this).offset().top;
  8. var new_anchor = $("<a>");
  9. var new_input_x = $("<input>");
  10. var new_input_y = $("<input>");
  11. var new_label = $("<label>");
  12. var new_id = x^2 + y;
  13.  
  14. new_anchor.attr("href", "#");
  15. new_anchor.attr("class", "anchor");
  16. new_anchor.css("margin-left", x);
  17. new_anchor.css("margin-top", y);
  18. new_anchor.html("+");
  19.  
  20. new_input_x.attr("type", "text");
  21. new_input_x.attr("name", "coor_" + x);
  22. new_input_x.attr("value", x);
  23.  
  24. new_input_y.attr("type", "text");
  25. new_input_y.attr("name", "coor_" + y);
  26. new_input_y.attr("value", y);
  27.  
  28. new_label.attr("id", new_id);
  29. new_label.append(new_input_x);
  30. new_label.append(new_input_y);
  31.  
  32. new_anchor.click(function() {
  33.  
  34. $(this).remove();
  35. $("label[id="+ new_id + "]").remove();
  36.  
  37. }
  38.  
  39. );
  40.  
  41. $('#picture_container').append(new_anchor);
  42. $('#picture_container').append(new_label);
  43.  
  44. });
  45.  
  46. });
  47.  
  48. $(function() {
  49.  
  50. $('#picture_container a').click(function(){
  51.  
  52. $(this).remove();
  53. return false;
  54.  
  55. });
  56.  
  57. });


Będę wdzięczny za podpowiedź.

Pozdrawiam
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


To nie jest kwestia jQuery, tylko tego, że pozycjonujesz elementy korzystając z margin.
Elementy powinny być pozycjonowane absolutnie przy użyciu top, left. Rodzic powinien być pozycjonowany relatywnie lub absolutnie.
Go to the top of the page
+Quote Post
rozny
post
Post #3





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

Ostrzeżenie: (0%)
-----


Dumałem nad tym przed chwilą za kółkiem i tak mi naszło na myśl, że to może być kwestia css, a nie jQuery. Poprawiłem na top/left (sama .anchor była pozycjonowana absolutnie) a rodzica na relative i teraz co prawda wszystkie kotwice umieszczane są w obrębie zdjęcia, niestety są przesunięte o kilkanaście px w górę względem kursora. Dlaczego?
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Jeśli jest niepoprawne położenie, to najpewniej obliczasz niepoprawnie pozycję. Prawda?
Sprawdź w dokumentacji co robi metoda offset.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 23.08.2025 - 13:10