Forum PHP.pl

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:

[PHP] pobierz, plaintext 
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>';
[PHP] pobierz, plaintext 

A tu online na jsfiddle:

http://jsfiddle.net/t816Ljdb/

Po przeciągnięciu miecza na slot on znika.

Ten post edytował Salur 1.08.2015, 22:23:39

Mam tylko chwilę wolnego, więc do końca nie rozwiązałem twojego problemu Myślę, że nakieruje cię to na poprawną odpowiedź

http://jsfiddle.net/Lukgb1kt/

ps. po co używasz .html(item.html()) ?

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

Ten post edytował Salur 1.08.2015, 23:56:24

Ikona broni jest przechowywana bezpośrednio w stylu inline, więc musisz skopiować styl background z przeciąganego elementu, do nowoutworzonego.

Zrobiłem tak jak mówisz lecz teraz itema nie da sie zdjąc ani wgl ruszyć

http://jsfiddle.net/t816Ljdb/2/

Ten post edytował Salur 2.08.2015, 18:07:52

Ja nie widzę abyś kopiował background.

Nie potrafię tego zrobić, jeszcze za mało wiem, podpowiesz?

Ten post edytował Salur 2.08.2015, 19:42:00

Kurcze, teraz na załozonym itemie nie widać tooltipa ;/

Wyświetlanie tooltipa:

[PHP] pobierz, plaintext 
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>';
[PHP] pobierz, plaintext 

Ten post edytował Salur 2.08.2015, 20:47:30

href dla <span>? <div> w <span>?
I dlaczego miałby tooltip się wyświetlać, używasz jakiejś funkcji wyświetlającej go?

Tooltipa wyswietlam odrazu z itemem:

[PHP] pobierz, plaintext 
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>';
 
 
<span class="tip_trigger"> - TOOLTIP
 
<span class="tip"> TRESC TOOLTIPA
[PHP] pobierz, plaintext 

Ten post edytował Salur 3.08.2015, 10:38:15

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.

Okej, to wrzucę ci wszystko bo nie jestem w stanie wytłumaczyć

kod d&d :

[PHP] pobierz, plaintext 
function itemEquip(item, slot) {
    var oldItem = $(slot).find('id', 'class');
    if (oldItem.length > 0) {
        oldItem.appendTo('#bagpack').draggable({
            revert: 'invalid'
        });
    }
    var newItem = $('<div></div>');
    newItem.attr('class', item.attr('class'))
           .html(item.html())
    .css('background',item.css('background'))
           .appendTo(slot)
           .draggable({
               revert: 'invalid'
           });
    item.remove();
}
$(document).ready(function() {
    $('#bagpack').droppable({
        accept: '.item',
        drop:function(e,ui){
            if(ui.helper.hasClass('armor')) 
                $('.slot.armor').droppable('enable');
        }
    });
    $('.slot.weapon').droppable({
        accept: '.item.weapon'
    });
    $('.slot.armor').droppable({
        accept: '.item.armor',
        drop:function(){
            $(this).droppable('disable');
        }
    });
    $('.item').draggable({
        revert: 'invalid'
    });
    $('#bagpack, .slot').bind('drop', function(ev, ui) {
        itemEquip(ui.draggable, this);
    });
});
[PHP] pobierz, plaintext 

kod tooltipa:

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); 
	}, function() {
		tip.hide(); 		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; 
		var mousey = e.pageY + 20; 
		var tipWidth = tip.width(); 
		var tipHeight = tip.height(); 
 
		var tipVisX = $(window).width() - (mousex + tipWidth);
 
		var tipVisY = $(window).height() - (mousey + tipHeight);
 
		if ( tipVisX < 20 ) { 
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { 
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});
[PHP] pobierz, plaintext 

kod wyswietlania itema wraz z tooltipem:

[PHP] pobierz, plaintext 
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>';
[PHP] pobierz, plaintext