javascript drag & drop położenie elementu

Witam

Przeciągam i upuszczam obrazek do div'a i jak próbuję przeciągnąć w to samo miejsce drugi obrazek to ten przeciągany znika (wskakuje pod spód) i dalej "na górze" jest pierwszy obrazek..
Jak zrobić żeby obrazek przeciągany jako drugi zastępował ten pierwszy obrazek, tzn. żeby pierwszy całkiem znikał a na jego miejscu był drugi (ewentualnie żeby ten drugi wskakiwał na wierzch a pierwszy "chował się" pod div'a)?

Mam taki kod:

<style>
#drop {border: 1px solid black;width:80px;height:80px;}
</style>

<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="obrazek1.png" draggable="true" ondragstart="drag(event)" width="80" height="80">
<img id="drag2" src="obrazek2.png" draggable="true" ondragstart="drag(event)" width="80" height="80">

<script>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    ev.target.appendChild(document.getElementById(data));
}

</script>

Pozdrawiam

czysc diva w funkcji drop na poczatku:

ev.target.innerHTML = "";

szalonyfacet napisał(a):

czysc diva w funkcji drop na poczatku:

ev.target.innerHTML = "";

Dodanie tego nic nie zmieniło. Dalej znika mi drugi obrazek zamiast pierwszego

http://jsbin.com/dutiraruluza/2/edit

przeciagnij i upusc planete, a potem przeciagnij i upusc to serce. plaenta znika, serce zostaje, po usunieciu mojej linijki, planeta i serce zostaja. co jest nie tak???

Działa jeśli się przeciągnie serce obok planety. Jak się przeciągnie w to samo miejsce to zostaje planeta a znika serce. Jak będę miał diva takiej samej wielkości jak obrazek to nie będzie możliwości przeciągnięcia jednego obrazka obok drugiego tylko za każdym razem w to samo miejsce.

ok, juz widze. wiec krotkie wyjasnienie. jak przerzucasz pierwsze zdjecie to elementem odbierajacym(czyli target) jest pusty div i w tego pustego diva wrzucane jest zdjecie, ale za drugim razem targetem nie jest ten div, a zdjecie, a ty w kodzie wciaz wrzucasz zdjecie do srodka tego zdjecia uzywajac appendChild, rozwiazanie: to sprawdazaj czy element na ktory wrzucasz jest twoim divem, jesli nie to jest to zdjecie a div jest jego rodzicem:

kod:

function drop(ev) {
    var eleid = ev.dataTransfer.getData("text/html");
    var el = ev.target;
    if (el.id != 'drop') {
        el = el.parentNode;
    }
    el.innerHTML = "";
    el.appendChild(document.getElementById(eleid));
    ev.preventDefault();
}

http://jsbin.com/dutiraruluza/4/edit

Jeden problem został rozwiązany (tzn. już nie znika drugi obrazek) ale powstał drugi problem :)

http://jsbin.com/sisuj/2/edit

jak się przeciągnie obrazek to rozjeżdża mi się div (który tak naprawde jest zrobiony z 64 części).

zacznij uzywac inspektora elementow i narzedzia do debugowania. mysle ze skoro chcesz nauczyc sie web developmentu to nieodlacznym partnerem twym beda narzedzia developerski, poczytaj. programista nie jest sie wtedy gdy pisze sie kod ktory zawsze dziala, programista jest sie wtedy gdy z kodu ktory nie dziala robi sie kod ktory dziala, bez latania co 5 minut na forum.

Zobacz na to http://jsbin.com/yisutayafawe/1/edit. O to chodziło?

nie o to , bo zakomentowanie sprawdzania spowodowalo ze wracasz do punktu wyjscia z pierwszego postu. w tym zakomentowanym przez ciebie miejscu on musi sprawdzic, czy obrazek na ktory przeciaga jest pionkiem. jesli to bedzie wygladac tak jak teraz to pionki i figury musza miec id, a pola planszowe nie moga miec wtedy wystarczty takie cos:

http://jsbin.com/finibuyusixa/1/edit

ale on do tego musi dojsc sam i sam zobaczyc jak to dziala i zrozumiec.