Nested sortables with Livewire event handling

asantibanez / laravel-blade-sortable

Custom Blade components to add sortable/drag-and-drop HTML elements in your apps.

MIT License

409 stars 79 forks source link

Nested sortables with Livewire event handling #2

Closed juliomotol closed 3 years ago

juliomotol commented 3 years ago

Is there any way I could handle the wire:onSortOrderChange and know whether it has been move from one list to another?

chosten commented 3 years ago

I think my problem is related. I need at least the group in the handleSortOrderChange method, or another customizable parameter.

JordivdB commented 3 years ago

Same problem here, right now theres no way to know in what dropzone you dragged your items. @asantibanez

asantibanez commented 3 years ago

Hi all! Thanks for your interest in the package.

This issue has been addressed in v1.1.0.

wire:onSortOrderChange gets called on any interaction with the drop zone: sorting, adding, removing.

Check it out.

juliomotol commented 3 years ago

Sorry, I don't understand. How was this resolved?

v1.1.0 is tagged at the same commit as v1.0.3 (commit 0bdd90f)

asantibanez commented 3 years ago

Thanks for the update @juliomotol .

Wrong version was tagged.

Just fixed. 👍

chosten commented 3 years ago

I still don't understand how that update fix this ? Maybe I'm missing something.

asantibanez commented 3 years ago

Don't follow @SquareBeard . Inside your Livewire component you have 2 drop zones and want to get updated on both with wire:onSortOrderChange?

chosten commented 3 years ago

Sorry maybe I should have done another issue, it does not seem related anymore. I want to know which drop zone is calling onSortOrderChange. My drop zones are created dynamically, I can't use a different method for each zone. I just need the group name or some other parameter to identify the drop zone. Something like

function handleSortOrderChange($order, $groupName) { ... }

Does that make more sense ?

juliomotol commented 3 years ago

I'm sorry @asantibanez, I'm with @SquareBeard on this one.

The concern was:

Is there any way I could handle the wire:onSortOrderChange and know whether it has been move from one list to another?

And yet, the new release feels like a refactor rather than a fix.

Taking an inspiration from SortableJs' event parameters, we could do:

function handleSortOrderChange($order, $toGroup, $fromGroup) { ... }

asantibanez commented 3 years ago

This is doable. How would you identify the containers? With an id in the sortable component?

chosten commented 3 years ago

Sounds good, but 'from' before 'to' feels more natural to me.

function handleSortOrderChange($order, $from, $to) { ... }

asantibanez commented 3 years ago

Hey @SquareBeard @juliomotol

Have this one working. I am sending this info the Livewire component:

Example callback

Demo

2021-03-26 18 24 57

How's that looking?

juliomotol commented 3 years ago

@asantibanez Looking like a charm. I really loved that you included the old sort order. Might come handy in the future.

asantibanez commented 3 years ago

Resolved in v1.2.0 👍

https://github.com/asantibanez/laravel-blade-sortable/releases/tag/v1.2.0

chosten commented 3 years ago

Looks great, thank you.

Hesesses commented 3 years ago

Hello and thank you for creating this!

About the demo above. When you move "Andres" to the middle section. How I should get the data that "Andres" was moved to somewhere?

I was hoping the "name" param would show this..

I think the only way to get this data now is to compare sortOrder and previousSortOrder and remove duplicates