Prevent element from dragging after dropping

Using JavaScript with Hype Function Library
1

Hi all,
searched the forum, but didn´t find an appropriate answer...: Is there a way, to prevent an element (on Drag -> Control Element Position) from being dragged again, after dropping (on (event.hypeGesturePhase == "end")) ...

Thanks in advance,
Kalle

2

you can place an element above after drop or try to add pointerevents: none after drop :slight_smile:

3

That´s exactly what I´m doing right now. I thought, there would be a more elegant way to achieve this... :wink: Tried pointerevents, but didn´t work...

4

you can add a data-attribute when dropped.

on dragstart check for the attribute. get startposition. apply the startposition continiously while drag happens ...

5

Hmm, not sure about the second part... tried this

if (event.hypeGesturePhase == "move" && element.dataset.moveable == true ){
	hypeDocument.setElementProperty(element, 'left', event['hypeGestureXPosition']);
	hypeDocument.setElementProperty(element, 'top', event['hypeGestureYPosition']);
}
	
if (event.hypeGesturePhase == "end" ){
	element.dataset.moveable = 0;
}

Prevent from dragging works, only event['hypeGestureXPosition']/event['hypeGestureYPosition'] does not seem to represent the mousePosition...

preventDragging.zip (12.5 KB)

6

Like this?
preventDragging.hype.zip (15,2 KB)

1 Like
7

I swear, I tried it - and it didn´t work... :grinning_face_with_smiling_eyes: And now I know why - element.style.pointerEvents = 'none'; doesn´t seem to work with symbols... why is that?

preventDragging_2.zip (14.1 KB)

1 Like
8

Pointer events only ever apply to the element. So, we have to use a CSS class that disables pointer events for the entire DOM subtree to prevent event bubbling!

Head HTML

	<style>
	
	.disabled, .disabled * {
		pointer-events: none !important;
	}
	
	</style>

In Drag Controller Function

	
	if (event.hypeGesturePhase == hypeDocument.kHypeGesturePhaseEnd ){
		element.classList.add("disabled");
	}

preventDragging_with_classList_add.hype.zip (18,3 KB)

Hint: To restore dragging, removing the class should work!

	yourElementToUnlock.classList.remove("disabled");
6 Likes
9

By the way, to restore all disabled elements, you can run this (on scene load):

var sceneElm = document.getElementById(hypeDocument.currentSceneId());
sceneElm.querySelectorAll('.disabled').forEach(function(elm){
	elm.classList.remove("disabled");
});
1 Like
10

Exactly the solution I was looking for :blush: And again - havo to brush up my CSS skills... :wink:Thanks a lot, Max!! :+1:

1 Like