Search the Community

Hi guys, I've been trying to debug this for a while, but I can't seem to figure it out anymore so can you please help me out? I inserted a link to my screen recording of the issue. Video link: https://www.kapwing.com/videos/676bc6be7e3f3d35d85891c6 As you can see in the video, my problem is that, when I drag my slider to the left, the custom cursor's x position moves further to the left and same goes on for the right side. The custom cursor is just not following the cursor properly. Here is a snippet of my code: //references const containerRef = useRef(null); //drag reviews const progressBarRef = useRef(null); // Reference to the progress bar //drag reviews const reviewsContainer = containerRef.current; const reviews = reviewsContainer.querySelector('.reviews'); const reviewsWidth = reviews.scrollWidth; // Total width of reviews // Create Draggable instance Draggable.create(reviews, { type: "x", bounds: { maxX: 0, minX: -(reviewsWidth - reviewsContainer.offsetWidth), }, inertia: true, snap: { x: (value) => Math.round(value / 300) * 300, // Adjust snapping points }, onDrag: function () { const progress = Math.abs(this.x) / (reviewsWidth - reviewsContainer.offsetWidth); // Get drag progress (0 to 1) const progressBar = progressBarRef.current; if (progressBar) { progressBar.style.left = `${Math.min(progress, 1) * 70}%`; // Update left based on drag progress } }, }); // Cleanup on unmount return () => { locoScroll.destroy(); ScrollTrigger.getAll().forEach(trigger => trigger.kill()); const instance = Draggable.get(reviews); if (instance) { instance.kill(); // Destroy Draggable instance } }; }, []); // custom cursor const [cursorPosition, setCursorPosition] = useState({ x: '0%', y: '0%' }); const [isHovered, setIsHovered] = useState(false); const handleMouseEnter = () => setIsHovered(true); const handleMouseLeave = () => setIsHovered(false); const handleMouseMove = (e) => { setCursorPosition({ x: e.clientX, y: e.clientY }); }; {/* reviews container */} <div className='reviewsContainer' ref={containerRef}> <div className='reviews' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onMouseMove={handleMouseMove}> {/* custom cursor for reviews */} <div className='dragCursor' style={{ transform: `translate(${cursorPosition.x + 50}px, ${cursorPosition.y - 250}px)`, opacity: isHovered ? 1 : 0, }}> <p> DRAG </p> </div> <div className='review'> <h1> A Game-Changer for My Mind and Body </h1> <p> I joined Soul Stretch a month ago, and it's been life-changing. The instructors are so calming, and the sessions are beginner-friendly but still challenging. My partner and I even did a couples' yoga class—it was such a great bonding experience.</p> <h3> — Amelia R. </h3> </div> {/* more reviews */} </div> {/* scrollbar for reviews */} <div className='reviewsScrollbar'> <div className='scrollbarProgress' ref={progressBarRef}></div> </div> </div> /* testimonials */ .reviewsContainer{ width: 100%; height: 400px; overflow: hidden; } .reviews{ display: flex; gap: 50px; padding-left: 80px; } .review{ line-height: 30px; height: 100%; overflow: hidden; flex: 1 0 25%; } .reviewsScrollbar{ position: relative; margin: 0 auto; width: 90%; height: 3px; background-color: #d5d3d3; overflow: hidden; margin-top: 70px; } .scrollbarProgress { position: absolute; left: 0; height: 100%; background-color: #838383; width: 30%; transition: width 0.1s ease-out; } .titleContainer { font-family: "Playfair Display"; display: flex; flex-direction: column; align-items: center; width: max-content; justify-content: left; margin: 100px 80px; text-transform: uppercase; line-height: 0; } .dragCursor{ position: fixed; background-color: #8ABD91; width: 50px; padding: 1.5rem; border-radius: 4rem; z-index: 2; text-align: center; color: white; font-family: "Playfair Display"; border: 2px solid white; pointer-events: none; }

I have been trying to use draggable to create a swap effect using various tutorials and examples found here. If you take a look at the codepen, the ondrop function basically needs to complete the swap: 1. The dragged element should move to the position pf the dropped element 2. The dropped element should move to the dragged elements starting position http://codepen.io/chrismcnally/pen/aNMVwQ I have tried a few things but i fear i am going about it the wrong way Id appreciate it if someone could point me in the right direction Thanks

Since my example code is so simple I thought it might be best to just lay it out here rather than use codepen. When I run the following code in firefox I get no error message but it doesn't drag either, in Chrome I get 2 errors: Uncaught SyntaxError: Unexpected token < dragTest.html:20 Uncaught ReferenceError: Draggable is not defined(anonymous function) @ dragTest.html:20 Here is my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drag test</title> <style type="text/css"> #smallBox { position: absolute; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="smallBox"></div> <script src="gs/min/utils/"></script> <script> Draggable.create("#smallBox"); </script> </body> </html>

Hi there, Thanks for updating Draggable so quickly - works great in IE now My current problem is that I've got 5 DOM elements that are being made Draggable. I was hoping that I could call a function using onDragStart and by passing through the parameters [this.target], I would be able to manipulate the DOM element that is currently being dragged. However, whenever I console.log out this.target - no matter what DOM element is being dragged - the return is always the last draggable element (i.e. 'drag_5'). Whilst I understand that Draggable can consist of an array of draggable elements, is there any way that I can identify which element is currently being dragged by using either something like [this.target] or by spitting out its position in the Draggable array? Cheers in advance