Conflict between bootstrap and interact.js

Question

I am trying to use the interact.js plugin for drag&drop with bootstrap. That works but when I put a draggable box in a nav it stops working.

For better understanding: https://jsfiddle.net/4ddoqcpj/

"Beat-TEST" works well but the other (in the nav) fall and won't stay in the dragzone.

Can anyone help me ? Please! That for school but my teacher doesn't know how to use bootstrap and all...

Answer 1

First off you have this configuration:

accept: '#yes-drop',

Usually id's are used only once on the page, you have multiple elements with the same id. I recommend accepting the .draggable class.

Now for the problem, you specify restriction: "parent" in the configuration. If you remove that the other elements can be dropped like you expect.