Drag & Drop || Viewport List item --> Drop Panel

[ustk]

@Chazrox I second Dave on this. I had a hard time understanding them but once done they reveal very powerful in some situations

[Chazrox]

@ustk @d-healey Thanks guys!

[HISEnberg]

@Chazrox just a side note start with the Broadcast Wizard (and David's video). I found it super helpful to understand how the Broadcast system works using the Broadcast wizard first, and ever since then I use them all over the place.

[Chazrox]

@HISEnberg I think the part that gets me is understanding what arguments to use and why, and in what order. I can assume, but I dont feel sure in my choices just yet. I've been using helper functions so Im barley starting to understand how to pass arguments to other functions but im still getting comfy with everything. Appreciate the advice!

[Chazrox]

@d-healey @ustk
Yo! ok I got this far. That wasnt that bad.

Maybe you can check this out and see why when I drag from different parts of the viewport list, the pop up image is sometimes right under my mouse as desired and sometimes it isnt. Is event.x at the time that im calling it 'event.x' of the entire UI or wah? I cant tell where im measuring from.

I would like to be able to 'check value' first so I can get item text and stuff for my end function eventually but I know thats going to require a different broadcaster callback. I'll figure that out after. I just want to center this image pop up. Any tips?

// Broadcaster definition
const var bcvpAllFilesFiltered = Engine.createBroadcaster({
  "id": "vpAllFilesFiltered",
  "args": ["component", "event"],
  "tags": []
});

// attach to event Type
bcvpAllFilesFiltered.attachToComponentMouseEvents(["vpAllFilesFiltered"], "Clicks, Hover & Dragging", "");

// attach first listener
bcvpAllFilesFiltered.addListener(pnlFileDragger, "FileDraggingNow", function(component, event){
	
	if (event.drag)
	{
		this.showControl(true);
		this.set("x", event.x + 100);
		this.set("y", event.y + 100);
	}
	else
	{
		this.showControl(false);
	}
});

[Chazrox]

@d-healey I watched your bc video again and for some reason it just made alot more sense this time around. I think I understand a little more in general now so it wasn't as intimidating. lol Thanks for the video!

[Chazrox]

----- continued thoughts.....

In the end, Im going to want to do .startExternalFileDrag();

am I going in the right path or am I digging a hole?

I want the user to be able to click/drag the viewport list item / grab file data / .startExternalFileDrag();

[Chazrox]

ok....

That wasnt that bad at all...

So I figured....bypass the actual panel visuals and just execute .startExternalFileDrag() and let it do its thing essentially using the panel just to hold the function I guess.

The only thing I need to do now (not shown in video) is to check for 'scrollbar drag' and not execute file dragger in that instance.

Here's the working code so far:

inline function DraggerFinishedCallback()
{
	
};


// Broadcaster definition
const var bcvpAllFilesFiltered = Engine.createBroadcaster({
  "id": "vpAllFilesFiltered",
  "args": ["component", "event"],
  "tags": []
});

// attach to event Type
bcvpAllFilesFiltered.attachToComponentMouseEvents(["vpAllFilesFiltered"], "Clicks, Hover & Dragging", "");

// attach first listener
bcvpAllFilesFiltered.addListener(pnlFileDragger, "FileDraggingNow", function(component, event){
	
	if (event.drag)
	{
		this.startExternalFileDrag(AudioLoopPlayerAuditioner.getFilename(), false, DraggerFinishedCallback);
	}
});

Anybody know how to check viewport list for 'scroll dragging'?

@d-healey @ustk
yyyyyeah bro, I can see where this can be useful in a lot of things...I think im getting it now.

[Chazrox]

@HISEnberg Im seeing now!

[Chazrox]

Anybody know how to check viewport list for 'scroll bar dragging'?