Add 'customDrop' config function

[canadaduane]

Allows for more complex interactions between svelte-dnd-action and non-svelte-dnd-action drop points.

For example, use customDrop function to determine if a custom element should be used as a drop point such as a "Trash Bin" to delete an item from a sortable list.

• accepts dragged element data and mouse position as params
• return true or undefined to complete revert-to-origin animation (false will cancel the animation).

[isaacHagoel]

Hi, Thanks for this. highly appreciated!

1. Can you please explain how this would be used in more detail and ideally also share a usage example (as in code that uses this new option)?
2. if it is expecting a function maybe the name could start with a verb (doBlaOnDrop)
3. I wonder if a cancellable event ('itemDropped' or a similar name) or something like that would be more appropriate, but that depends your answer to #1
4. If we go ahead with this as is, we will need to update the readme, typings, version (0.9.0) and release-notes

[canadaduane]

Is there a way to use the svelte REPL to show this in action, before it's included in a release?

[isaacHagoel]

I don't think so, but you can paste some code here as a comment/attachment/link and i will switch to your branch and try it out locally

On Sat, Jan 16, 2021, 14:20 Duane Johnson [email protected] wrote:

Is there a way to use the svelte REPL to show this in action, before it's included in a release?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761303280, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC5RYSCSBIMEUGDSN23S2EAXRANCNFSM4WEGN75A .

[canadaduane]

Here is an example:

https://github.com/canadaduane/svelte-dnd-action-custom-drop

[canadaduane]

Screencast:

https://user-images.githubusercontent.com/129/104797103-dbc8e400-5778-11eb-9b53-f6f27acf1010.mp4

[isaacHagoel]

From a brief look at the code and mp4 a quick question: can't it be achieved using the existing features? The finalise handler knows which dropzone the item was dropped to (e.currentTarget) which is what u r using the mouse ciordinates from. Turning the animation off should be possible by setting flipDuration to zero (can also be done dynamically if needed). What am i missing?

[isaacHagoel]

(cont): i mean also making the droptargets dnd zones that simply don't display the items. if my description above is too hand-wavy, i can try to create it in the REPL when I have 30-45 min. still, if u do understand my hand waves and noticed something i missed, pls do let me know and save me from wasting my time on an impossible attempt 😄

[canadaduane]

I tried with existing features for a very long time. It might be possible, but it was very difficult to achieve if so.

There are multiple outcomes at a high level that get difficult to reason about inside of a "TRIGGERS" switch inside consider/finalize:

• I don't want the dropped items to go into the dropzone itself, I want them to go to the sortable list associated with the dropzone
• Several times, I ran into issues where spacers (hidden shadow elements) would exist where I didn't want them to
• I couldn't use "Dragula" style example, because I also need the user to be able to re-arrange the order inside the list
• The COPY/MOVE/DELETE actions are easier to reason about on drop

The biggest issue for me was spending about a week trying to figure out the internals of svelte-dnd-action using a TRIGGERS switch, and failing at it. There were too many edge cases, and I found this was a much more elegant solution for me.

It's possible setting flipDuration to zero may be sufficient for turning the animation off--I hadn't considered that.

On Fri, Jan 15, 2021 at 9:37 PM Isaac Hagoel [email protected] wrote:

From a brief look at the code and mp4 a quick question: can't it be achieved using the existing features? The finalise handler knows which dropzone the item was dropped to (e.currentTarget) which is what u r using the mouse ciordinates from. Turning the animation off should be possible by setting flipDuration to zero (can also be done dynamically if needed). What am i missing?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761388613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAABAKI5TITVH4JUG54RNLS2EJW7ANCNFSM4WEGN75A .

[isaacHagoel]

I think this usecase is super valid and i'd like the library to support it. I will look at your code in more depth and also try to do it using existing features to get a feel for what makes it complicated. I am sorry to hear you had a hellish week fighting with the library. Feel free to reach out earlier if that happens again. Will keep you posted.

[canadaduane]

Sounds good, and thank you. I appreciate the library you all have made here--I tried other non-svelte library solutions (e.g. SortableJS, Dragula) and they, too, were quite complicated to get right for this use case.

On Fri, Jan 15, 2021 at 9:55 PM Isaac Hagoel [email protected] wrote:

I think this usecase is super valid and i'd like the library to support it. I will look at your code in more depth and also try to do it using existing features to get a feel for what makes it complicated. I am sorry to hear you had a hellish week fighting with the library. Feel free to reach out earlier if that happens again. Will keep you posted.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761410611, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAABAK2U5JJ5CXPD4XL6R3S2EL5RANCNFSM4WEGN75A .

[isaacHagoel]

Hi, I've made this POC REPL. Make sure the REPL downloads v0.8.6 (there was a bug in 0.8.5 that will affect it). A hard refresh should get you the correct version.

There are some things that aren't perfect about it (tabindex on the delete group, the way the element transforms and the lack of styling) but I think it functions as expected. Have I missed anything? Pls have a look.

[canadaduane]

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).
4. You can delete a favorite by dragging it to Delete.

[isaacHagoel]

Sounds a tiny bit strange to be able to drag from favorites to a folder. I would expect to only be able to delete a favourite (dragging to trash).

With that said, it sounds very doable either way. Up to you :)

It will require treating the names as unique within folders (which makes sense). I am happy to add it but will it be okay to ask you to style the resulting repl a bit so that it looks nicer (like your app)? That way we will be able to include it in the readme as a super advanced example.

On Sun, Jan 17, 2021, 02:57 Duane Johnson [email protected] wrote:

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761586542, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7EJXYJE7US6P3VO2LS2GZOFANCNFSM4WEGN75A .

[canadaduane]

Sure, I can style it, no problem.

Yeah, the "Files" and "Folders" metaphor breaks down a bit here. How we're actually using this is as a set of collections of images in our app ( staging.relm.us). Certain admins have the ability to add an image to any public collection from their private "favorites".

On Sat, Jan 16, 2021 at 1:51 PM Isaac Hagoel [email protected] wrote:

Sounds a tiny bit strange to be able to drag from favorites to a folder. I would expect to only be able to delete a favourite (dragging to trash).

With that said, it sounds very doable either way. Up to you :)

It will require treating the names as unique within folders (which makes sense). I am happy to add it but will it be okay to ask you to style the resulting repl a bit so that it looks nicer (like your app)? That way we will be able to include it in the readme as a super advanced example.

On Sun, Jan 17, 2021, 02:57 Duane Johnson [email protected] wrote:

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761586542 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC7EJXYJE7US6P3VO2LS2GZOFANCNFSM4WEGN75A

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761646517, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAABANZU6LPALAEQ5WKXQTS2H34ZANCNFSM4WEGN75A .

[canadaduane]

Should I wait until you're done before styling? I'm not sure if the REPL has the ability to merge/rebase/resolve conflicts.

On Sat, Jan 16, 2021 at 2:16 PM Duane Johnson [email protected] wrote:

Sure, I can style it, no problem.

Yeah, the "Files" and "Folders" metaphor breaks down a bit here. How we're actually using this is as a set of collections of images in our app ( staging.relm.us). Certain admins have the ability to add an image to any public collection from their private "favorites".

On Sat, Jan 16, 2021 at 1:51 PM Isaac Hagoel [email protected] wrote:

Sounds a tiny bit strange to be able to drag from favorites to a folder. I would expect to only be able to delete a favourite (dragging to trash).

With that said, it sounds very doable either way. Up to you :)

It will require treating the names as unique within folders (which makes sense). I am happy to add it but will it be okay to ask you to style the resulting repl a bit so that it looks nicer (like your app)? That way we will be able to include it in the readme as a super advanced example.

On Sun, Jan 17, 2021, 02:57 Duane Johnson [email protected] wrote:

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761586542 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC7EJXYJE7US6P3VO2LS2GZOFANCNFSM4WEGN75A

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761646517, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAABANZU6LPALAEQ5WKXQTS2H34ZANCNFSM4WEGN75A .

[isaacHagoel]

Cool. I am not next to a computer atm. Will have a look and add the favorites today or tomorrow

On Sun, Jan 17, 2021, 08:17 Duane Johnson [email protected] wrote:

Sure, I can style it, no problem.

Yeah, the "Files" and "Folders" metaphor breaks down a bit here. How we're actually using this is as a set of collections of images in our app ( staging.relm.us). Certain admins have the ability to add an image to any public collection from their private "favorites".

On Sat, Jan 16, 2021 at 1:51 PM Isaac Hagoel [email protected] wrote:

Sounds a tiny bit strange to be able to drag from favorites to a folder. I would expect to only be able to delete a favourite (dragging to trash).

With that said, it sounds very doable either way. Up to you :)

It will require treating the names as unique within folders (which makes sense). I am happy to add it but will it be okay to ask you to style the resulting repl a bit so that it looks nicer (like your app)? That way we will be able to include it in the readme as a super advanced example.

On Sun, Jan 17, 2021, 02:57 Duane Johnson [email protected] wrote:

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761586542

, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC7EJXYJE7US6P3VO2LS2GZOFANCNFSM4WEGN75A

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761646517 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AAAABANZU6LPALAEQ5WKXQTS2H34ZANCNFSM4WEGN75A

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761664435, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYZD665TTBOP27GRDTS2H65HANCNFSM4WEGN75A .

[isaacHagoel]

After im done. Thx

On Sun, Jan 17, 2021, 08:21 Duane Johnson [email protected] wrote:

Should I wait until you're done before styling? I'm not sure if the REPL has the ability to merge/rebase/resolve conflicts.

On Sat, Jan 16, 2021 at 2:16 PM Duane Johnson [email protected] wrote:

Sure, I can style it, no problem.

Yeah, the "Files" and "Folders" metaphor breaks down a bit here. How we're actually using this is as a set of collections of images in our app ( staging.relm.us). Certain admins have the ability to add an image to any public collection from their private "favorites".

On Sat, Jan 16, 2021 at 1:51 PM Isaac Hagoel [email protected] wrote:

Sounds a tiny bit strange to be able to drag from favorites to a folder. I would expect to only be able to delete a favourite (dragging to trash).

With that said, it sounds very doable either way. Up to you :)

It will require treating the names as unique within folders (which makes sense). I am happy to add it but will it be okay to ask you to style the resulting repl a bit so that it looks nicer (like your app)? That way we will be able to include it in the readme as a super advanced example.

On Sun, Jan 17, 2021, 02:57 Duane Johnson [email protected] wrote:

This looks really good. The only thing that's missing is a "Favorites" folder that behaves differently than the others, i.e. it results in accepting a copy of a file rather than the file itself. Some constraints:

1. If you drag the same file multiple times into Favorites, only one copy will ever be made (you can't "favorite" a file twice; another way of saying this is that Favorites is an Ordered Set, not a List)
2. If you drag a favorite into a Folder, a copy is made (i.e. the favorite stays in Favorites)
3. If you drag a favorite into a Folder and the original file is already in that Folder, no copy is made (no action).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761586542

, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC7EJXYJE7US6P3VO2LS2GZOFANCNFSM4WEGN75A

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761646517 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AAAABANZU6LPALAEQ5WKXQTS2H34ZANCNFSM4WEGN75A

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/pull/227#issuecomment-761667518, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC2D7J2YKLDVCLXB4SLS2H7N3ANCNFSM4WEGN75A .

[isaacHagoel]

Alright. This was more straightforward than I expected (not complaining) and overall the library seems to have lended itself quite well to this usecase imho. REPL

Things that are still missing:

• Styling
• Applying transformDraggedElement in order to make the morphing effect nicer (should it more to some icon or something?)
• It is not good that the delete button has a tabindex of 0 but currently the library auto-applies it. I will think about a proper solution for this at the library level (open for ideas).
• keyboard interactions seem to work (I tested in a rush) but it doesn't feel great (it's not clear what's happening) and the aria messages and instructions need to be overridden to something that makes sense (using autoAriaDisabled on the dnd-zones ).

EDIT:

• Although i don't think it is terrible as is, you might want drag start on the favourites to show that a copy is created when the item is taken to another folder, but not to the trash. This requires some thought. Should be doable if well defined. Same thing when an item from a folder is dragged over the favourites. it might be very confusing to the user though.

[canadaduane]

Nice work!!

I've updated styles here: https://svelte.dev/repl/317cf511ee4445b8b36e2ff13e2327c4?version=3.31.2

The only quibble I have is that I'd prefer it if the drag didn't make it look like it will MOVE the item by default. In my example above, it defaults to making a copy (leaving the shadow element in place) so that whatever the user does, the item doesn't look like it's moving until the very last moment when it's dropped into a folder. This allows dragging to the favorites (for example) to look like a copy is being made during the drag. Not sure if this is a big change though.

[isaacHagoel]

It should be easy to make it always looks like either move or copy. The thing here is that it is sometimes move sometimes copy and sometimes delete...

[isaacHagoel]

After giving this some more thought and in the context of the recent/ on-going discussion around #223, I have kind of gone a full circle. I am now considering dispatching a new consider event that gets fired on the origin dndzone when the item is dropped anywhere outside of the origin dndzone, before the final animation to place plays (== before the finalize events). The event can include (in e.detail) information such as the current mouse/touch position, the dragged dom element (which will allow transforming the element or calculating the distance between the mouse and the centre/edges of the element for example). If the event is canceled (e.preventDefault()), the final animation won't play (and maybe the last finalize events won't fire, not sure about that one).

this will allow not using dndzones for favourites in this example (i think it is still a good idea to make the other folders and delete buttons dndzones since "move" semantics is appropriate for them ), but still be able to respond when something was dropped onto favourites. It will probably also be handy in the whiteboard example and will prevent the application code from having to track the mouse on its own. it will also prevent the jitter on drop I think. This idea is very close to the original feature you proposed in this PR, just uses a cancellable event instead of a new option.. I haven't thought it through yet, but this is what's on my mind at them moment. Keyboard might present a challenge here as well and will require consideration. Thoughts?

[canadaduane]

I think that makes sense. There's a lot that svelte-dnd-action does automatically for sortable lists, but then there are some clear dnd use cases that are slightly out of scope (favorites, whiteboard) and it would be nice to be able to get just enough information at the application level to implement alternatives.

[canadaduane]

One more thought: An additional requirement that I will have is dragging an item (image) into the 3D world (a canvas) and then turning it into a 3D object inside the world. I think what you propose would help with that as well.

[Florian-Schoenherr]

I mean, if we get the nodes data (with mouse position), essentially all positioning is opened up to the dev. That's really good! It should solve the whiteboard stuff.

[isaacHagoel]

@canadaduane @Florian-Schoenherr I created a draft PR, #232. I tried to add the minimum that I thought would be required. I included an example in the PR's description. I didn't have time to try to use it in our two use cases just yet, but in case you want to play you can try the branch (223-user-dropped-event) locally.