Obraz znika po najechaniu na nim innym obrazem - Drag&Drop

pytanie zadane 14 kwietnia 2020 w JavaScript przez Bazzam Użytkownik (810 p.)
edycja 14 kwietnia 2020 przez Bazzam

Witam, moj problem polega na tym, ze gdy przeciagam obraz do danego diva w ktorym znajduje sie juz jeden obraz tam przeciagniety, to ten obraz znika. Pozdrawiam i dziekuje za pomoc

EDIT: Zauwazylem, ze po nalozeniu drugiego diva,ten pierwszy div zostaje wchloniety do drugiego. jest ktos w stanie wytlumaczyc dlaczego tak sie dzieje? pozdrawiam

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 110px;
  padding: 10px;
  border: 5px solid #aaaaaa;
}
    .drag{
        background-color: aqua;
        width: 200px;
        height: 50px;
    }
    #drag2{
        background-color: red;
    }
    #dragSlot{
        width: 200px;
        height: 110px;
    }
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
    function removeDrop(ev){
    ev.preventDefault();
    ev.dataTransfer.setData("text",ev.target.id);
    var data = ev.dataTransfer.getData("text" , ev.target.id);
    ev.target.appendChild(document.getElementById(data));

}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="drag1" class="drag" draggable="true"  ondrop="removeDrop(event)" ondragstart="drag(event)" width="336" height="69"></div>
    <div id="drag2" class="drag" draggable="true" ondrop="removeDrop(event)" ondragstart="drag(event)" width="336" height="69"></div>
    <div id="dragSlot" class="slot" draggable="true" ondrop="removeDrop(event)" width="336" height="69"></div>
    

</body>
</html>

1 odpowiedź

odpowiedź 14 kwietnia 2020 przez mb-dir Mądrala (6,710 p.)

Witam, mógłbyś może podać jeszcze twój kod, np po przez Codepen? Bez kodu ciężko cokolwiek powiedzieć;)

komentarz 14 kwietnia 2020 przez Bazzam Użytkownik (810 p.)

Juz poprawione

komentarz 14 kwietnia 2020 przez mb-dir Mądrala (6,710 p.)

EDIT: Zauwazylem, ze po nalozeniu drugiego diva,ten pierwszy div zostaje wchloniety do drugiego. jest ktos w stanie wytlumaczyc dlaczego tak sie dzieje? pozdrawiam

Dzieję się tak dlatego, że korzystasz z właściwości target, która to wskazuje na element, na którym dane zdarzenie się wydarzyło, rozwiązaniem w tej sytuacji jest użycie właściwości currentTarget, ona natomiast wskazuje na element, do którego podpięliśmy funkcję nasłuchującą dane zdarzenie. Zresztą spójrz tu (odpal konsole - F12 i sprawdzaj co jest logowane), wypisałem dla Ciebie co zwraca target w zależności na jaki element "upuścimy" inny element.

Przydatne linki:

PS. jaką role pełni div o id "dragSlot"? Bo nie mogę tego rozgryźć

komentarz 14 kwietnia 2020 przez Bazzam Użytkownik (810 p.)

To taki skrypt pisany szybko na twoja prosbe, mial on byc uzyty w funkcji removeDrop(), gdyz chcialbym zrobic tak, ze gdy w "div1" znajduje się element, a my przeciagamy drugi, to ten pierwszy byl zwracany do "dragSlot", zamiast przykrywany pod nalozonym elementem. Miałbys moze jakies wskazowki jak sie do tego zabrac? Pozdrawiam i dzieki za dotychczasowa pomoc