Skip to content
Advertisement

Not able to drop element when creating dynamic divs to drag and drop element in

Following up on my previous question. It works perfectly. But when I dynamically create the divs where the li element is dropped in, I am not able to drop the element in it.

I am using the basic HTML drag and drop feature. Why is the on drop working with dynamically created div?

Here is my code:

JavaScript
JavaScript

In my code, once you click on the checkbox next to a Harry Potter character, it creates a div. After selecting the 3 divs (only 3 allowed), divs are created next to the check box. I want to drag each of the one, two & three to each of the divs. Why is it not working?

Here is the fiddle for my code.

Advertisement

Answer

Your target divs are dynamically created so you need to bind that with static elements which are already present inside your dom . So , just use $("#char").on('drop', '.target',.. and same for dragover event .

Also, in your code when user uncheck the checkbox and if there are any li item inside target div they are also get removed . Instead you check if the target div has any class with name list-group-item if yes then just clone that element and then append same to your list and finally remove whole div .

Demo Code :

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement