• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
137 wizyt
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ź

0 głosów
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

Podobne pytania

0 głosów
0 odpowiedzi 98 wizyt
pytanie zadane 5 lutego 2018 w JavaScript przez Kiele Obywatel (1,530 p.)
+1 głos
1 odpowiedź 143 wizyt
pytanie zadane 28 sierpnia 2020 w JavaScript przez nowyklemens Początkujący (430 p.)
+1 głos
1 odpowiedź 219 wizyt
pytanie zadane 31 sierpnia 2020 w JavaScript przez nowyklemens Początkujący (430 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...