The first scene lets you put in a custom name for a draggable box (nothing is draggable yet). After selecting NEXT, the blue boxes are draggable and you can drag them to any of the target areas on the left. They snap to the target areas via JavaScript, which sets their X and Y coordinates to match those of the target it was dropped over.
It works pretty much the way I want, except that after having dragged an element the first time and then dragging it again to move it somewhere else, the element jumps away from the cursor in some cases. Everything still works, but until you let an element return to the starting area on the right (done with Timelines), dragging the element multiple times gets odd results.
I suspect, from other conversations, that this is related to Hype’s internal method of moving elements. My understanding is that even though I change X and Y coordinates with JS, Hype may not know I’ve done that when I go to drag again.
Bottom line is … Does anyone have a clean way to do something similar?
This is probably what is happening. It looks like the jump distance is how much jquery snaps the items by, which is outside of hype's control (I assume you roughly use the on drag handler to control element position and then do other things?). It would probably be best to use jquery for the drag part as well.
Yes, @jonathan, I'm using Hype's drag functions to control position then when the drag stops, I use JavaScript to move the element to the appropriate position.
@h_classen and @jonathan, thanks. I'll look into using jQuery for this. Haven't done a lot with jQuery but I'll give it a go.
You probably already figured out the issue, but if not I found that using hypeDocument.setElementProperty() to animate the position of the div back works instead of using pure javascript which seems to not update hype as mentioned above.
You are right, that’s the best method for this type of DnD. When I first posted about this issue, Hype 3.5 wasn’t released yet so I didn’t have access to the hypeDocument.setElementProperty() JavaScript and wound up doing what I needed via multiple timelines. But… when you have dozens of potential timelines, the hypeDocument.setElementProperty() is a much better approach!