CODEWITHSUNDEEP
javascripthtmlcssdrag-and-drop
Nasco.Chachev
Nasco.Chachev

Reputation: 676

Javascript drag'n'drop issue

I`m currently trying to build my own drag'n'drop app (I'm doing it so I can learn js drag and drop API). So let me explain my issue with a code. There's a jsfiddle below.

JSFIDDLE HERE!

So as you can see the user is able to drag different shirts in the <div id="drag-end"></div> area.

When there's already existing element in this area (first shirt drop) , If I try to drop a new item , I can drop it on the <div id="drag-end"></div> area only , and cannot replace if I drag it onto the already existing shirt. Do you have any ideas how to fix that ? I've tried to play with z-indexes in CSS ,but seems that's kinda stupid idea , since it doesn't work. I also will receive any tutorials/ideas for dnd API , because I`m new to it and still trying to do everything myself. Thanks

Upvotes: 0

Views: 42

Answers (1)

Pal Singh
Pal Singh

Reputation: 1974

If you use JavaScript event delegation, you can easily solve this problem. And instead of binding events on document, you should target your div element. And you also don't need to listen to few events. Checkout the fiddle

like:

document.getElementById('drag-end').addEventListener('drop'...

I've updated the fiddle here

Upvotes: 1

Related Questions