kovle Posted September 29, 2022 Share Posted September 29, 2022 Hello ! idk why hittest works only in the first div 😕 I wish I could drop all my drag divs in the drop area how to detect a collision with multiple dynamically created elements ? See the Pen KKRQEmY by kovle (@kovle) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted September 29, 2022 Solution Share Posted September 29, 2022 1 hour ago, kovle said: idk why hittest works only in the first div Hello @kovle I think that's a logic issue you are having - as you are hit-testing on a jQuery object that contains multiple elements, similar to an array/nodelist, it will probably only ever target/work on the first element in that list, so you will probably have to modify things to be targetting specific elements instead. Since you appear to want to have the hit-testing on each of your elements in the drop area, you could e.g. do that with an each-loop. I'm not sure how heavy this will be on the performance in the long run, as it will be happening for each of those elements on every drag-event, but this seems to work much more like what I understood you want to happen. onDrag: function(e){ const dragged = this drop_area.each(function(i,el) { if(dragged.hitTest(el, hit_detection)){ $(el).addClass("hit"); }else{ $(el).removeClass("hit"); } }) }, See the Pen mdLXgqY by akapowl (@akapowl) on CodePen Since it looks like you were mixing vanilla JS with jQuery a bit in that example of yours, I just wanted to mention that of course you could also do all that without jQuery involved - but that is up to you of course. Here is that example with the latest GSAP / Draggable in vanilla JS. See the Pen GRdQaqo by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
kovle Posted September 30, 2022 Author Share Posted September 30, 2022 Thanks you so much 😍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now