使用 Shopify/draggable 和 Alpine.js x-for 指令

Question

我正在尝试使 Shopify 的可排序插件与 Alpine.js 一起使用，但是当我拖放项目时，它会在控制台中生成错误

"Alpine Error: 'ReferenceError: framework is not defined'
Expression: 'framework'
Element: "<li x-text="framework" tabindex="0" style="" class="draggable-source--is-dragging">springs</li>

这是一个可重现的例子

https://codepen.io/cbaconnier/pen/bGgxyWE?editors=1011

<html>
<head>
</head>
<body>
<div x-data="{frameworks: ['laravel', 'rails', 'django', 'springs']}">
  
<ul> 
  <template x-for="framework in frameworks" :key="framework">
    <li x-text="framework"></li>
  </template>
</ul>
  
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.12/lib/sortable.js"></script>
<script>
  const sortable = new Sortable.default(document.querySelectorAll('ul'), {
      draggable: 'li'
    });
</script>
</body>
</html>

我知道有一些自制的 dragable/sortable 已经用 Alpine.js 完成了，但是因为我已经在这个项目和其他一些项目中使用它和 Livewire，所以也能制作它会很好有效。

Answer 1

尽管我想保留 Shopify/draggable，但我已经放弃使用 SortableJS/Sortable，它似乎效果很好。

<html>
<head>
</head>
<body>
<div 
    x-data="{frameworks: ['laravel', 'rails', 'django', 'springs']}"
    x-init="Sortable.create($refs.items)"
>
  
<ul x-ref="items"> 
  <template x-for="framework in frameworks" :key="framework">
    <li x-text="framework"></li>
  </template>
</ul>
  
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
</body>
</html>

使用 Shopify/draggable 和 Alpine.js x-for 指令

Use Shopify/draggable with Alpine.js x-for directive

javascript

alpine.js