asantibanez / laravel-blade-sortable Goto Github PK
View Code? Open in Web Editor NEWCustom Blade components to add sortable/drag-and-drop HTML elements in your apps.
License: MIT License
Custom Blade components to add sortable/drag-and-drop HTML elements in your apps.
License: MIT License
I am trying to use the package with defer modifier and it does not work. I want to first sort all of my images and when I click the save button to send the sorted order to the server. This is to avoid many HTTP requests to server.
wire:onSortOrderChange.defer="handleOnSortOrderChange" // is not working
Is the defer modifier working? If not is it possible to achieve this behavior somehow?
Hi Andres , thanks for everything, I was wondering if its possible to limit the sorting in a group it self, for example you can drag from A to B, but not change the positions in A itself, appreciate any help, thanks
Basically:
Hi,
is there a touch Drag function? On a mobile device i cant sort my Items.
Hello,
How to store/submit droped items (in order)?
DRAG FROM:
<x-laravel-blade-sortable::sortable group="orders">
@foreach($orders as $order)
<x-laravel-blade-sortable::sortable-item as="div" sort-key="{{ $order->id }}" class="bg-theme-gray-500 my-1 px-5 py-5 text-white">{{ $order->id }}</x-laravel-blade-sortable::sortable-item>
@endforeach
</x-laravel-blade-sortable::sortable>
DROPED IN:
<form method="POST" action="{{ route('selected_orders.update', $workday->id) }}" class="py-6 px-10">
@csrf
@method('PATCH')
<x-laravel-blade-sortable::sortable group="orders" name="sort_order">
<!--- DROP ZONE -->
</x-laravel-blade-sortable::sortable>
<button type="submit">Submit</button>
</form>
Hey there, great package!
I'm wondering if I'm missing something -- is there a way to get the updated sort list for both the from
and to
groups when updating? I just see the new order and previous order for the target group I think
Hi, trying to use this with a livewire component.
@foreach ($p1->chunk(4) as $chunk)
<div class="row" style="background-color: #8cdba9; margin-bottom: 7px; padding: 10px;">
<x-laravel-blade-sortable::sortable>
@foreach ($chunk as $item)
<x-laravel-blade-sortable::sortable-item as='label' class="checkbox-inline col-3" sort-key="{{$item->order_position}}" drag-handle="drag-handle">
{{-- <label class="checkbox-inline col-3"> --}}
<input type="checkbox" value="1" id="item{{$item->id}}" @if (in_array($item->id, $currentConfigs)) checked @endif wire:click="updateConfig({{ $item->id }})"> {!! $item->value !!}
{{-- </label> --}}
</x-laravel-blade-sortable::sortable-item>
@endforeach
</x-laravel-blade-sortable::sortable>
</div>
@endforeach
When I do this and try to click my element, the console prints this error:
I have my scripts in the file listed in this order:
@livewire
/js/app.js
and lastly the x-laravel-blade-sortable::scripts/
I have installed alpine and sortable through NPM and run npm dev to compile the scripts (within Laravel) after including/requiring the libraries in the app/bootstrap.js files.
What is causing this error?
When trying to render the components in Livewire, I throws:
syntax error, unexpected 'endif' (T_ENDIF), expecting end of file (View: /home/user/laravel/vendor/asantibanez/laravel-blade-sortable/resources/views/components/sortable-item.blade.php)
Livewire: 2.3.17
Laravel: 7.30.4
After further inspection, when I remove the <x-dynamic-component/>
in the component's blade views, it was able to render properly.
<x-dynamic-component/>
wasn't introduced until Laravel 8.x.
Maybe considering removing illuminate/support ^7.x
in the composer.json
I am getting error when I drag and drop a sortable item.
When I remove wire:onSortOrderChange="handleOnSortOrderChanged", it works. Method was properly added to livewire component.
Anyone knows how to fix it? I am using laravel 9.11 version. PHP 8.0.1
hi,
Could i ask for an option to append / prepend for when dropping whilst allow-sort is false please?
It seems strange to be able to drop anywhere on an element if sorting is not allowed.
thanks.
when I dont use the "formesm" component it work flawlessly.
but using it when I sort in the same div it work but when I drag to another div (groupe) it crash
index.js:32 Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null
at new Component (index.js:32)
at onNodeAdded (index.js:476)
...
grpcard component view calling the formesm component
<x-laravel-blade-sortable::sortable wire:key="{{$grp->id}}" name="{{$grp->id}}" group="people" animation="700" ghost-class="opacity-50" wire:onSortOrderChange="handleSortOrderChange" > @if($grp->formes) @foreach($grp->formes as $forme) <x-laravel-blade-sortable::sortable-item sort-key="{{$forme->id}}" wire:key="{{$forme->id}}"> <div class="w-2/4"> <livewire:formesm :forme="$forme" :key="$forme->id"></livewire:formesm> </div> </x-laravel-blade-sortable::sortable-item> @endforeach @endif </x-laravel-blade-sortable::sortable> </div>
formesm component : between two div just echo the $forme->prenom
{{$forme->prenom}}
I have the following code for the drag handle:
<x-laravel-blade-sortable::sortable
animation="1000"
ghost-class="opacity-25"
drag-handle="drag-handle"
>
<x-laravel-blade-sortable::sortable-item sort-key="jason">
Jason
<div class="bg-red-100 drag-handle">
Drag
</div>
</x-laravel-blade-sortable::sortable-item>
<x-laravel-blade-sortable::sortable-item sort-key="andres">
Andres
<div class="bg-red-100 drag-handle">
Drag
</div>
</x-laravel-blade-sortable::sortable-item>
<x-laravel-blade-sortable::sortable-item sort-key="matt">
Matt
<div class="bg-red-100 drag-handle">
Drag
</div>
</x-laravel-blade-sortable::sortable-item>
<x-laravel-blade-sortable::sortable-item sort-key="james">
James
<div class="bg-red-100 drag-handle">
Drag
</div>
</x-laravel-blade-sortable::sortable-item>
</x-laravel-blade-sortable::sortable>
But you can now drag the element if you are outside the div of drag handle. I just want you to be able to move it only when you press the drag handle. Does the documentation say it can be done this way? Am I doing something wrong?
Is there any way I could handle the wire:onSortOrderChange
and know whether it has been move from one list to another?
Hi,
I am displaying a full screen modal on top of a sortable list. However, when the modal is displayed, the underlying list can still be sorted.
It would be good if the package could support the filter
option available in SortableJS, so I can at least add a temporary class while the model is being disabled. Even better would be to allow developers to specify all the config values available in SortableJS ๐. Thanks.
Best,
Kam
Hello,
The problem i'm having is to NOT have linked drop zones. I would like to have just 2 listings A and B.
You should not be able to drag item from A to B or from B to A
I have tried this with:
Any ideas?
Edit:
I can return false from wire:onSortOrderChange function to disable the dropping, but would be nice to disable this from UI also
https://github.com/asantibanez/laravel-blade-sortable/issues/9#issuecomment-903175095
i use this from the example, but there is no data passed... all variables are empty except $name, $from, $to
public function handleOnSortOrderChanged($sortOrder, $previousSortOrder, $name, $from, $to)
{
// $sortOrder = new keys order
// $previousSortOrder = keys previous order
// $name = drop target name
// $from = name of drop target from where the dragged/sorted item came from
// $to = name of drop target to where the dragged/sorted item was placed
}
Hello,
I have multiple sortable lists:
group 1
group 2
(no teams)
group 3
(no teams)
sample code:
@foreach ($groups as $group)
<x-laravel-blade-sortable::sortable
group="teams"
name="{{ $group->id }}"
wire:onSortOrderChange="groupChanged"
>
@foreach ($group->teams as $team)
<x-laravel-blade-sortable::sortable-item
sort-key="{{ $team->id }}"
>
<div>
{{ $team->name }}
</div>
</x-laravel-blade-sortable::sortable-item>
@endforeach
</x-laravel-blade-sortable::sortable>
@endforeach
I have a function that can remove a group. ($groups is updated)
If I remove the group2, then each groups after that breaks... for example when group 2 is removed and i try to move a team from group 1 to group 3
groupChanges will receive the following params:
0: ["..."]
1: ["..."]
2: "group 2" <- this is already deleted, should be group 1
3: "group 1"
4: "group 3"
Any ideas whats wrong?
Hey, I have noted that the documentation notes that the handleSortOrderChange
is a method used with livewire
, is there a way of catching that data when am not using Livewire?
Hi,
Would be nice to have allow-drag=true|false
This would disable dragging from the container.
For example I have lists A, B and C
I want to move items from A and B to C
I dont want to move items from C to anywhere
I've a sortable group of 'current' and 'available' models. On the controller's handleSortOrderChange()
I'm creating an attach list and a detach list to implement on submit. My problem is that the teo group's keep refreshing to the initial state af each call t ohandleSortOrderChange() ... how can i skip the render please?
It currently doesn't work with new version of Alpine. Is there any plans for alpine v3 support?
As this project seems to be dead (sad because this package is pure gold!), have anyone forked this to work with Laravel 10?
Hello,
I'm getting this when trying to update/install on laravel 9 project:
composer require asantibanez/laravel-blade-sortable
Using version ^1.3 for asantibanez/laravel-blade-sortable
./composer.json has been updated
Running composer update asantibanez/laravel-blade-sortable
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Root composer.json requires asantibanez/laravel-blade-sortable ^1.3 -> satisfiable by asantibanez/laravel-blade-sortable[v1.3.0].
- asantibanez/laravel-blade-sortable v1.3.0 requires illuminate/support ^7.0|^8.0 -> found illuminate/support[v7.0.0, ..., 7.x-dev, v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require.
You can also try re-running composer require with an explicit version constraint, e.g. "composer require asantibanez/laravel-blade-sortable:*" to figure out if any version is installable, or "composer require asantibanez/laravel-blade-sortable:^2.1" if you know which you need.
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.