drag & drop - położenie elementu Opcje

[tomtheman]

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:

[CSS] pobierz, plaintext 
<style>
#drop {border: 1px solid black;width:80px;height:80px;}
</style>
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<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">
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
 
function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}
 
function drop(ev) {
    ev.preventDefault();[CSS][/CSS]
    var data = ev.dataTransfer.getData("text/html");
    ev.target.appendChild(document.getElementById(data));
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Pozdrawiam

[r4xz]

http://jsfiddle.net/uv8dma56/
http://jsfiddle.net/uv8dma56/1/

Zwróć uwagę co zwraca ev.target

[tomtheman]

Ok jak jest jeden div to działa tak jak powinno ale jak połączę więcej divów tak jak tu:

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

to dalej jest problem ze znikaniem drugiego obrazka po nałożeniu na pierwszy. Można obrazki dowolnie przenosić pomiędzy poszczególnymi divami do momentu aż chcę je oba przenieść do jednego diva.

[r4xz]

Linijka:

[JAVASCRIPT] pobierz, plaintext 
if( parent.id == 'drop' ) {
[JAVASCRIPT] pobierz, plaintext 

Spróbuj tam wcisnąć:
indexOf oraz 'tile'

Więcej nie mogę podpowiedzieć... takie podstawy musisz sam załapać.

[tomtheman]

No właśnie kombinuję, kombinuje i same głupoty mi wychodzą a drugi obrazek jak znikał tak znika dalej.

[r4xz]

Nie powinienem tego robić, ale niech stracę... zamień wyżej wymienioną linijkę na:

[JAVASCRIPT] pobierz, plaintext 
if( parent.className.indexOf('tile') >= 0 ) {
[JAVASCRIPT] pobierz, plaintext 

Polecam Ci kupić jakąś książkę o JS