ktewes
(Kalle)
November 17, 2021, 12:18pm
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
h_classen
(Hans-Gerd Claßen)
November 17, 2021, 12:30pm
2
you can place an element above after drop or try to add pointerevents: none after drop
ktewes
(Kalle)
November 17, 2021, 12:32pm
3
That´s exactly what I´m doing right now. I thought, there would be a more elegant way to achieve this... Tried pointerevents, but didn´t work...
h_classen
(Hans-Gerd Claßen)
November 17, 2021, 12:36pm
4
you can add a data-attribute when dropped.
on dragstart check for the attribute. get startposition. apply the startposition continiously while drag happens ...
ktewes
(Kalle)
November 17, 2021, 1:09pm
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)
MaxZieb
(Loves Hype)
November 17, 2021, 1:30pm
6
1 Like
ktewes
(Kalle)
November 17, 2021, 2:08pm
7
I swear, I tried it - and it didn´t work... 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
MaxZieb
(Loves Hype)
November 17, 2021, 2:34pm
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
MaxZieb
(Loves Hype)
November 17, 2021, 6:49pm
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
ktewes
(Kalle)
November 18, 2021, 6:29am
10
1 Like