How to implement dragleave tool event handler

Development
1

We are working on implementing a drag tool and would like to be able to send out a message with the latest position of a node when the dragleave happens. I am able to get a tool working that returns a handlers object with a drag function. From what I see, that only allows me to provide a callback handler as the mouse moves and there’s not way to know when the dragging stops. According to the Threekit docs there are dragenter, dragover and dragleave handlers but when I create a tool with those and put console logs in, I am not seeing them being called. Does anyone know a way to do this?

My current workaround is to create a mouseup event handler, but I’d prefer to have it specifically attached to dragging so that I don’t have to track when dragging starts in order to filter the mouse up events.

Some more documentation or examples would be helpful…below is the drag tool I’ve tried (I’m testing against the admin environment):

{
        key: "drag",
        active: true,
        enabled: true,
        handlers:
        {
            drag: (event: IMouseEvent) => { return { handle: (...) => {} } }, /* works, but don't know when the dragging stops */
            dragenter: (event: IMouseEvent) => { /* not called */ },
            dragover: (event: IMouseEvent) => { /* not called */ },
            dragleave: (event: IMouseEvent) => { /* not called */ },
        }
}
2

Hey Mike sorry for the confusion - I had our team look at the tool event handler code, it doesn’t look like the player propagates dragenter, dragover and dragleave to player tools. I’ve logged this with our team to make sure our docs are updated.

You could simply implement these events manually outside of a player tool, though this does make use of private apis that are not officially supported.

The only thing the below “unsupported” player api calls are really doing is accessing the player html element, which you can probably just replace by using the parent div the player was initialized into anyway (granted, that div would include the autogenerated configurator UI too, if you’re displaying that).

As a simple example, run this on a page with a player embed (assuming the player api is exposed as “api”).

api.enableApi('player');
api.player.el.addEventListener('dragenter', ()=>{console.log('dragenter')})
api.player.el.addEventListener('dragover', ()=>{console.log('dragover')})
api.player.el.addEventListener('dragleave', ()=>{console.log('dragleave')})

Then, you need to have an element that is “draggable” (has attribute draggable="true"), for ex.:
<p draggable="true">drag me</p> then drag that element in and out of the player to see the logs from the above event listeners.

Please let me know if this is helpful.

3

One more thing I’d like to point out, it seems that you are on our admin environment, which no longer is receiving updates. You can see a list of our new environments here.

My team is going to reach out directly to you and infor to make sure your environments are updated and receiving the latest features and fixes.

4

Yes, we’re aware of that and have a backlog to switch over that will be happening in the near future. I’ll also look into the event listeners - thanks for that clarification.

As far as the drag leave event, is there a place I recommend an update to the tool as a feature request? I’d love to see when creating the drag tool the ability to return an object with two handlers instead of one:
{
handle: (event) => { /* EXISTING - events fire during drag movement / },
handleDrop: (event) => { / NEW - mouse up happens and the event provides same information so that we can calculate the position and take any actions */ }
}

5

I’m happy to take some feedback if you have it - I created a #platform-admin:feature-request category. If you have code examples like you posted above that would be really valuable as well.

If you post it there I will log a feature request with our team.

6

Thanks for creating that! I’ve added it

7

Fantastic, thank you for the insight!