Replies: 3 comments 1 reply
-
|
I'm stuck with the same problem. Hope there is some workaround. |
Beta Was this translation helpful? Give feedback.
-
|
The directive just instantiates a third party library called sortableJs. Once the library has applied, the directive doesn't react to config changes. |
Beta Was this translation helpful? Give feedback.
-
|
A bit undercooked, this one... |
Beta Was this translation helpful? Give feedback.
-
|
@Saeven, recently ran into this issue and found myself here. I was able to achieve a similar goal by using the "draggable" x-sort configuration (see: SortableJS Options) and specifying the dragging class, then toggling the specified dragging class on my x-sort items. I modified your example with a working solution: <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.14.0/dist/cdn.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"
></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="overflow-auto">
<div x-data="Example()">
<div class="w-full h-24 p-10">
<button
@click="disableSorting"
x-text="sortConfiguration.disabled ? 'enable sorting' : 'disable sorting'"
type="button"
class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
></button>
</div>
<div class="w-full p-10">
<ul
x-sort
x-sort:config="sortConfiguration"
role="list"
class="divide-y divide-gray-100"
>
<li
class="flex gap-x-4 py-5"
x-sort:item="1"
:class="!sortConfiguration.disabled && 'can-drag'"
>
<img
class="h-12 w-12 flex-none rounded-full bg-gray-50"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
Leslie Alexander
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2023-03-04T15:54Z">1d ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600">
Explicabo nihil laborum. Saepe facilis consequuntur in eaque.
Consequatur perspiciatis quam. Sed est illo quia. Culpa vitae
placeat vitae. Repudiandae sunt exercitationem nihil nisi
facilis placeat minima eveniet.
</p>
</div>
</li>
<li
class="flex gap-x-4 py-5"
x-sort:item="2"
:class="!sortConfiguration.disabled && 'can-drag'"
>
<img
class="h-12 w-12 flex-none rounded-full bg-gray-50"
src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
Michael Foster
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2023-03-03T14:02Z">2d ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600">
Laudantium quidem non et saepe vel sequi accusamus consequatur
et. Saepe inventore veniam incidunt cumque et laborum nemo
blanditiis rerum. A unde et molestiae autem ad. Architecto dolor
ex accusantium maxime cumque laudantium itaque aut perferendis.
</p>
</div>
</li>
</ul>
</div>
</div>
<script>
function Example() {
return {
sortConfiguration: {
disabled: false,
draggable: '.can-drag',
},
disableSorting() {
this.sortConfiguration.disabled = !this.sortConfiguration.disabled
},
}
}
</script>
</body>
</html>
` |
Beta Was this translation helpful? Give feedback.
-
Hi!
I'm trying to disable sorting dynamically - but what I'd expected might work, doesn't seem to. Anyone achieve this? I've got an example of what I'm trying to achieve here:
https://jsbin.com/nazucit/2/edit?html,output
Basically, binding on a sortable config, and passing that config over to x-sort.
Beta Was this translation helpful? Give feedback.
All reactions