Remove on drag away (question / feature request)

[vyconm]

I've looked through all the open issues and examples but can't seem to find something similar, so i'm going to take a shot here :) - is there any way to implement a "delete on drag" method? Like, if I drag an element to somewhere that isn't over or close to a dropzone, it should get deleted from the origin-list - kinda similar to how you can remove items from the macOS dock. Thanks for any input and awesome library! <3

[isaacHagoel]

can you describe the desired behaviour in more detail or more formally? do you want to delete when it's dropped outside of any zone or do something like a recycle bin?

…

On Fri, Sep 20, 2024 at 8:04 AM Nicolas Montavon ***@***.***> wrote: I've looked through all the open issues and examples but can't seem to find something similar, so i'm going to take a shot here :) - is there any way to implement a "delete on drag" method? Like, if I drag an element to somewhere that isn't over or close to a dropzone, it should get deleted from the origin-list - kinda similar to how you can remove items from the macOS dock. Thanks for any input and awesome library! <3 — Reply to this email directly, view it on GitHub <#602>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC54KUJCF242JDVARL3ZXNDAJAVCNFSM6AAAAABOQ2GEOSVHI2DSMVQWIX3LMV43ASLTON2WKOZSGUZTONBUGQ3TOMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[vyconm]

Thanks for the quick reply!

Basically, yes - just delete it when it is outside of any droppable zone. My Basic Setup is:

Two dropzones - a) with building blocks b) with a timeline that receives the building blocks

--> on dropzone b) it would be convenient to drag an item away from it, and then it would delete it from the dropzone-list-array. A small delay would be helpful, but not necessary. Same for how close it needs to be for the delete action to switch between being on the dropzone or not being on it.

It's not a dealbreaker, but would be (in my usecase) an intuitive enhancement :)

[isaacHagoel]

Did you try using the trigger that is passed to the finalize handler (see readme, the trigger you want is the dropped outside of any one)?

…

On Fri, Sep 20, 2024, 18:00 Nicolas Montavon ***@***.***> wrote: Thanks for the quick reply! Basically, yes - just delete it when it is outside of any droppable zone. My Basic Setup is: Two dropzones - a) with building blocks b) with a timeline that receives the building blocks --> on dropzone b) it would be convenient to drag an item away from it, and then it would delete it from the dropzone-list-array. A small delay would be helpful, but not necessary. Same for how close it needs to be for the delete action to switch between being on the dropzone or not being on it. It's not a dealbreaker, but would be (in my usecase) an intuitive enhancement :) — Reply to this email directly, view it on GitHub <#602 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3MAFEZ7GYKGEGS5M3ZXPI3NAVCNFSM6AAAAABOQ2GEOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRTGA4DAOJZGY> . You are receiving this because you commented.Message ID: ***@***.***>

[vyconm]

I need to buy some reading glasses - sorry for the "dumb" question! Thank you so much!

Looking for triggers DRAGGED_LEFT_ALL on consider and DROPPED_OUTSID_OF_ANY provides exactly the functionality I am after.

One thing remaining: I cannot seem to be able to properly handle removing the shadow-item as well when it is being considered to be deleted, this is my functions rn:

function handleDndConsider2(e: CustomEvent<DndEvent>) {
		const { trigger, id } = e.detail.info;

		if (trigger === TRIGGERS.DRAGGED_LEFT_ALL) {
			console.warn(`maybe dropping ${id} outside of any`);
			e.detail.items = e.detail.items.filter(
				(item: AudioModule | unknown) => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item.id !== id
			);
			timelineAudio = e.detail.items;
			return;
		}
		timelineAudio = e.detail.items;
	}

	$inspect('timelineAudio', timelineAudio);
	function handleDndFinalize2(e: CustomEvent<DndEvent>) {
		const copy = timelineAudio;

		const { trigger, id } = e.detail.info;

		if (trigger === TRIGGERS.DROPPED_OUTSIDE_OF_ANY) {
			console.warn(`dropping ${id} outside of any`);
			e.detail.items = e.detail.items.filter(
				(item: AudioModule | unknown) => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item.id !== id
			);
			timelineAudio = e.detail.items;
			mashFiles();
			return;
		}

		if (copy === e.detail.items) {
			timelineAudio = e.detail.items;
			console.warn('No changes detected in the timeline audio array.');
			return;
		}
		timelineAudio = e.detail.items;
		getMaxAudioLength();
		mashFiles();
	}

[isaacHagoel]

Why do you need to remove the shadow item? Maybe make a quick repl with what you have so far?

…

On Fri, Sep 20, 2024, 19:30 Nicolas Montavon ***@***.***> wrote: I need to buy some reading glasses - sorry for the "dumb" question! Thank you so much! Looking for triggers DRAGGED_LEFT_ALL on consider and DROPPED_OUTSID_OF_ANY provides exactly the functionality I am after. One thing remaining: I cannot seem to be able to properly handle removing the shadow-item as well when it is being considered to be deleted, this is my functions rn: const { trigger, id } = e.detail.info; if (trigger === TRIGGERS.DRAGGED_LEFT_ALL) { console.warn(`maybe dropping ${id} outside of any`); e.detail.items = e.detail.items.filter( (item: AudioModule | unknown) => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item.id !== id ); timelineAudio = e.detail.items; return; } timelineAudio = e.detail.items; } $inspect('timelineAudio', timelineAudio); function handleDndFinalize2(e: CustomEvent<DndEvent>) { const copy = timelineAudio; const { trigger, id } = e.detail.info; if (trigger === TRIGGERS.DROPPED_OUTSIDE_OF_ANY) { console.warn(`dropping ${id} outside of any`); e.detail.items = e.detail.items.filter( (item: AudioModule | unknown) => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item.id !== id ); timelineAudio = e.detail.items; mashFiles(); return; } if (copy === e.detail.items) { timelineAudio = e.detail.items; console.warn('No changes detected in the timeline audio array.'); return; } timelineAudio = e.detail.items; getMaxAudioLength(); mashFiles(); }``` — Reply to this email directly, view it on GitHub <#602 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC2EX6TEYS3JR3MRMP3ZXPTMXAVCNFSM6AAAAABOQ2GEOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRTGI4DEMRUGM> . You are receiving this because you commented.Message ID: ***@***.***>

[vyconm]

Sure thing, good idea:

https://svelte.dev/repl/46ac9355a1a343d59f0a27e19c32e7d3?version=3.59.2

Basically, when dragging the items away from the "timeline" I would like to placeholder to not exist when considering deleting it, ad then reeapper when considering leaving it back or changing its index. Hope that helps!

[isaacHagoel]

why did you use the dragula example? did you try to give the shadow element height zero or something like that instead of removing it? there is an example for styling the shadow element

…

On Fri, Sep 20, 2024 at 8:22 PM Nicolas Montavon ***@***.***> wrote: Sure thing, good idea: https://svelte.dev/repl/46ac9355a1a343d59f0a27e19c32e7d3?version=3.59.2 Basically, when dragging the items away from the "timeline" I would like to placeholder to not exist when considering deleting it, ad then reeapper when considering leaving it back or changing its index. Hope that helps! — Reply to this email directly, view it on GitHub <#602 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC4Z2NOJXEATYHQB4ZDZXPZOJAVCNFSM6AAAAABOQ2GEOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRTGM4DGMBRGA> . You are receiving this because you commented.Message ID: ***@***.***>

[vyconm]

I did think about that - unfortunately I need a placeholder when I drag an item from the bottom list into the top one.

I used the dragula example just as a starting point for the repl, as my bottom list basically behaves the same (i used that for reference)

so what I am trying to achieve:

--> if drag from bottom list into top one -- always shadow element
--> if drag from top list back to different position -- always shadow element
--> if drag from top list away (deleting it) -- no shadow element, which would have the added effect of not animating the item back into the position before deleting it

[isaacHagoel]

Can you use a store to keep which zone triggered drag start and control the shadow element height based on that? Cancelling the end animation is a feature I wanted to add for a while but haven't done it so far (should be easy to add)

…

On Fri, Sep 20, 2024, 22:19 Nicolas Montavon ***@***.***> wrote: I did think about that - unfortunately I need a placeholder when I drag an item from the bottom list into the top one. I used the dragula example just as a starting point for the repl, as my bottom list basically behaves the same (i used that for reference) so what I am trying to achieve: --> if drag from bottom list into top one -- always shadow element --> if drag from top list back to different position -- always shadow element --> if drag from top list away (deleting it) -- no shadow element, which would have the added effect of not animating the item back into the position before deleting it — Reply to this email directly, view it on GitHub <#602 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCZKH4BXERN23PX6U3DZXQHEXAVCNFSM6AAAAABOQ2GEOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRTGU4TKMZSG4> . You are receiving this because you commented.Message ID: ***@***.***>

[isaacHagoel]

I just released a new version with an option to disable the final drop animation if you still need that