Drag CursorAt (change cursor position while dragging)

Using JavaScript with Hype
1

Before Hype put a touch-libray in it, I used jquery to drag and drop things in my projects. There’s a API to change the cursor position when you drag things around. That’s very nice to still see the thing you’re dragging around.

$( "#dragElement" ).draggable({ revert: true, revertDuration: 1000, start: function(event, ui){hypeDocument.startTimelineNamed("drag");}, stop: function(event, ui) {hypeDocument.pauseTimelineNamed("drag");}, cursorAt: { top: 60, left: 25 }; });

Now I’m using the Hype drag API and it all works fine. Except for the cursorAt. I’m working on a project with tiny elements to drag and you simply can’t see them when you drag them… Is there way to change the cursos-position and use the Hype drag API’s?

2

if you use this with flexible layout, you´ll get problems on dragging elements,
because the x,y-coordinates will be shifted.
so better you rewrite the code with getter-setter API of hype.

3

I’m already using all Hype API’s, but I’m missing the option for ‘cursorAt’ and I hope there’s a way to use this with the hype API’s

4

I’m a little confused; my read on the documentation is that cursorAt gives an offset position and doesn’t actually change the cursor position?

If you’re using the On Drag event with JavaScript, you can access the cursor position via event['hypeGestureXPosition'] and event['hypeGestureYPosition'] variables. This could be used in conjunction with the left/top for the getter API to determine the offset.

5

The thing I want to accomplish is this: When you start to drag a small element, your finger blocks the view on the element. With jquery you can change the cursor, well, the API suggests it will change the offset of the cursor, but in fact it gives the drag element an offset so it’s not ‘under’ your finger but above it (depends on the setting of the cursorAt values).

After two glasses of wine and a good sleep I’ve come up with two solutions without jquery!
First one: group the draggable element and attach this script to it:
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) { var vChildElement = element.childNodes[0].childNodes[0]; hypeDocument.setElementProperty(vChildElement, 'top', -30, 0.1, 'easeinout'); }else if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) { var vChildElement = element.childNodes[0].childNodes[0]; hypeDocument.setElementProperty(vChildElement, 'top', 0, 0.1, 'easeinout'); };

Or the solution that @jonathan suggested.

Take a look at the example document, where the blue ellipse is a jquery draggable element with a cursorAt offset, the orange ellipse has the group-child solution and the red ellipse follows the event[‘hypeGestureXPosition’] with a offset.
Drag-cursorAt.hype.zip (16.7 KB)

2 Likes
6

I like the hype one, Works much better than the Jquery. The Red one disappears.

I could only look on desktop at the mo.

7

yeah i like the orange one two. it does a nice snap at the end :slight_smile:

8

Always funny how someone can struggle with code for days, only to find the solution yourself after posting it on a forum. :smile:

1 Like