将 Shopify/draggable 与 Alpine.js x-for 指令一起使用答案

【问题标题】：Use Shopify/draggable with Alpine.js x-for directive将 Shopify/draggable 与 Alpine.js x-for 指令一起使用
【发布时间】：2021-04-20 17:20:32
【问题描述】：

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

“Alpine 错误：'ReferenceError: framework is not defined'
表达方式：'framework'
元素："<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>

我知道已经用 Alpine.js 完成了一些自制的可拖动/排序，但由于我已经在这个项目和其他项目中使用 Livewire

【问题讨论】：

标签： javascript alpine.js

【解决方案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>

【讨论】：