Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]D&D ekwipunek
Forum PHP.pl > Forum > Przedszkole
Salur
Cześć, to znów ja, dziś mam problem z drag and drop. Problem w tym że po przeciągnięciu na miejsce np. miecza obrazek znika a w kodzie wygląda tak jakby był.

Przedmioty wyświetlam pętlą while w ten sposób:

  1. echo '<span class="tip_trigger" href="#"><div id= "'.$przedmiot['id'].'" class="item '.$przedmiot['typ'].'" style="border: none; background: url('.$przedmiot['obrazek'].')"></div><span class="tip"><h3 class="tip_title">'.$przedmiot['nazwa'].'</h3><b>'.$title.'</b></span></span>';


A tu online na jsfiddle:

http://jsfiddle.net/t816Ljdb/

Po przeciągnięciu miecza na slot on znika.
CuteOne
Mam tylko chwilę wolnego, więc do końca nie rozwiązałem twojego problemu smile.gif Myślę, że nakieruje cię to na poprawną odpowiedź

http://jsfiddle.net/Lukgb1kt/

ps. po co używasz .html(item.html()) ?
Salur
Niestety za duzo mi to nie pomogło, mógłby ktoś bardziej przybliżyć problem?

PS: W którym momecie moge wykonywac ajax z aktualizacja danych w bazie?

ref
trueblue
Ikona broni jest przechowywana bezpośrednio w stylu inline, więc musisz skopiować styl background z przeciąganego elementu, do nowoutworzonego.
Salur
Zrobiłem tak jak mówisz lecz teraz itema nie da sie zdjąc ani wgl ruszyć wink.gif

http://jsfiddle.net/t816Ljdb/2/
trueblue
Ja nie widzę abyś kopiował background.
Salur
Nie potrafię tego zrobić, jeszcze za mało wiem, podpowiesz?
trueblue
http://jsfiddle.net/t816Ljdb/3/
Salur
Kurcze, teraz na załozonym itemie nie widać tooltipa ;/

Wyświetlanie tooltipa:

  1. echo '<span class="tip_trigger"><div id= "'.$przedmiot['id'].'" class="item '.$przedmiot['typ'].'" style="border: none; background: url('.$przedmiot['obrazek'].')"></div><span class="tip"><h3 class="tip_title">'.$przedmiot['nazwa'].'</h3><b>'.$title.'</b></span></span>';
trueblue
href dla <span>? <div> w <span>?
I dlaczego miałby tooltip się wyświetlać, używasz jakiejś funkcji wyświetlającej go?
Salur
Tooltipa wyswietlam odrazu z itemem:

  1. echo '<span class="tip_trigger"><div id= "'.$przedmiot['id'].'" class="item '.$przedmiot['typ'].'" style="border: none; background: url('.$przedmiot['obrazek'].')"></div><span class="tip"><h3 class="tip_title">'.$przedmiot['nazwa'].'</h3><b>'.$title.'</b></span></span>';
  2.  
  3.  
  4. <span class="tip_trigger"> - TOOLTIP
  5.  
  6. <span class="tip"> TRESC TOOLTIPA

trueblue
Usunąłeś: .html(item.html())
Niemniej w kodzie html, który podałeś nie ma tego fragmentu, nie ma również kodu JS odpowiedzialnego za wyświetlanie tooltipa.
Salur
Okej, to wrzucę ci wszystko bo nie jestem w stanie wytłumaczyć wink.gif

kod d&d :

  1. function itemEquip(item, slot) {
  2. var oldItem = $(slot).find('id', 'class');
  3. if (oldItem.length > 0) {
  4. oldItem.appendTo('#bagpack').draggable({
  5. revert: 'invalid'
  6. });
  7. }
  8. var newItem = $('<div></div>');
  9. newItem.attr('class', item.attr('class'))
  10. .html(item.html())
  11. .css('background',item.css('background'))
  12. .appendTo(slot)
  13. .draggable({
  14. revert: 'invalid'
  15. });
  16. item.remove();
  17. }
  18. $(document).ready(function() {
  19. $('#bagpack').droppable({
  20. accept: '.item',
  21. drop:function(e,ui){
  22. if(ui.helper.hasClass('armor'))
  23. $('.slot.armor').droppable('enable');
  24. }
  25. });
  26. $('.slot.weapon').droppable({
  27. accept: '.item.weapon'
  28. });
  29. $('.slot.armor').droppable({
  30. accept: '.item.armor',
  31. drop:function(){
  32. $(this).droppable('disable');
  33. }
  34. });
  35. $('.item').draggable({
  36. revert: 'invalid'
  37. });
  38. $('#bagpack, .slot').bind('drop', function(ev, ui) {
  39. itemEquip(ui.draggable, this);
  40. });
  41. });


kod tooltipa:

  1. $(document).ready(function() {
  2.  
  3. $(".tip_trigger").hover(function(){
  4. tip = $(this).find('.tip');
  5. tip.show();
  6. }, function() {
  7. tip.hide();
  8. }).mousemove(function(e) {
  9. var mousex = e.pageX + 20;
  10. var mousey = e.pageY + 20;
  11. var tipWidth = tip.width();
  12. var tipHeight = tip.height();
  13.  
  14. var tipVisX = $(window).width() - (mousex + tipWidth);
  15.  
  16. var tipVisY = $(window).height() - (mousey + tipHeight);
  17.  
  18. if ( tipVisX < 20 ) {
  19. mousex = e.pageX - tipWidth - 20;
  20. } if ( tipVisY < 20 ) {
  21. mousey = e.pageY - tipHeight - 20;
  22. }
  23. tip.css({ top: mousey, left: mousex });
  24. });
  25. });


kod wyswietlania itema wraz z tooltipem:

  1. echo '<span class="tip_trigger"><div id= "'.$przedmiot['id'].'" class="item '.$przedmiot['typ'].'" style="border: none; background: url('.$przedmiot['obrazek'].')"></div><span class="tip"><h3 class="tip_title">'.$przedmiot['nazwa'].'</h3><b>'.$title.'</b></span></span>';
trueblue
Kod podpinasz na zdarzenie DOMReady, więc tylko dla elementów istniejący.
Tooltip, a właściwie jego rodzic jest tworzony dynamicznie, więc najlepiej użyć delegacji zdarzeń i podpiąć kod pod zdarzenia: mouseenter, mouseleave i mousemove.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.