Search the Community
Showing results for tags 'hit test'.
Found 3 results
-
Ok so this is a continuation of my previous post (that was resolved) The problem now is that when the item that exists below the fold (you have to scroll to reach it), when dragged the draggable on the `move` function will correctly resolve hitTest versus other containers, but on dragEnd it will not resolve hitTest correctly. Other list elements that are above the scrollbar correctly resolve hitTest on both `move` and `dragEnd` Here is a sample: https://stackblitz.com/edit/gsap-react-basic-f48716-tc3dev?file=src%2FBoxItem.js (simply drag box 3, 4 over the drop area and release, the hit test resolves correctly, then drag box 7 on move it will fire the hitTest correctly, but when released over the drop-area the hitTest will return false) 2024-01-18 16-51-16 (1).mp4 -
Hi Folks, I think I'm missing something super simple, but I can't find it. In the vanilla demo hit test example an element from a "droppables" collection is used as a jQuery selector, and a "highlight" class is added tot hat element while the hit state is true and removed when it is false. The effect is that the element *underneath* the dragged element is highlighted. I want to invert that effect, and have the item that is being *dragged* highlighted if it is dragged over a droppable element. I expected to be able to do this fairly easily by changing the $(droppables[i]).addClass("highlight"); for $(this.target).addClass("highlight"); however this doesn't work. I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen. Many thanks Shaun
-
This chunk of code was working great in one JS file, but now I'm using the code in another project and it's giving me this error in Chrome: Draggable.js:2186 Uncaught TypeError: _unwrapElement(...).getBoundingClientRect is not a function The line in my code that's triggering the error is the line below, "if (this.hitTest..." function onDrag() { G.hitting = null; tile.positioned = false; for (var i = 0; i < G.tiles.length; i++) { if (this.hitTest(G.tiles[i], G.dragThreshhold)) { G.hitting = i; } } console.log("currently hitting "+G.hitting); } How do I go about troubleshooting this? I'm sure the error isn't actually in Draggable.js, but instead it has something to do with how my code is set up. FWIW, the code chunk in the broken page is identical to the code in the working page. I've tried changing the order the JS scrips that are being loaded on the page, but no luck. What are some other things I can try to troubleshoot this?
