使用 Shopify/draggable 和 Alpine.js x-for 指令
Use Shopify/draggable with Alpine.js x-for directive
我正在尝试使 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,所以也能制作它会很好有效。
尽管我想保留 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 的可排序插件与 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,所以也能制作它会很好有效。
尽管我想保留 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>