简单的;“你好,世界”;Shopify可拖动库示例
正在寻找使用Shopify库的一组可排序元素的简单工作示例。捆绑的示例对我来说不够简单。这就是您想要的简单的;“你好,世界”;Shopify可拖动库示例,shopify,draggable,Shopify,Draggable,正在寻找使用Shopify库的一组可排序元素的简单工作示例。捆绑的示例对我来说不够简单。这就是您想要的 <!doctype html> <html> <head> <style> #xxx>span { display: inline-block; margin: 30px; padding: 30px 60px; color: white; font-s
<!doctype html>
<html>
<head>
<style>
#xxx>span {
display: inline-block;
margin: 30px;
padding: 30px 60px;
color: white;
font-size: 40px;
border-radius: 20px;
text-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.draggable-source--is-dragging {
visibility: hidden;
}
</style>
</head>
<body>
<div id="xxx">
<span style="background-color: red;">1</span>
<span style="background-color: orange;">2</span>
<span style="background-color: gold;">3</span>
<span style="background-color: green;">4</span>
<span style="background-color: blue;">5</span>
<span style="background-color: indigo;">6</span>
<span style="background-color: violet;">7</span>
<span style="background-color: brown;">8</span>
<span style="background-color: cyan;">9</span>
<span style="background-color: magenta;">10</span>
<span style="background-color: navy;">11</span>
<span style="background-color: maroon;">12</span>
<span style="background-color: purple;">13</span>
<span style="background-color: pink;">14</span>
<span style="background-color: lime;">15</span>
<span style="background-color: lightblue;">16</span>
<span style="background-color: black;">17</span>
<span style="background-color: gray;">18</span>
<span style="background-color: tan;">19</span>
<span style="background-color: yellowgreen;">20</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/draggable.bundle.js"></script>
<script>
const sortable = new Draggable.Sortable(
document.querySelector('#xxx'), {
draggable: 'span',
}
)
sortable.on('sortable:start', () => {
console.log('sortable:start')
})
sortable.on('sortable:sort', () => {
console.log('sortable:sort')
})
sortable.on('sortable:sorted', () => {
console.log('sortable:sorted')
})
sortable.on('sortable:stop', () => {
console.log('sortable:stop')
})
</script>
</body>
</html>
#xxx>span{
显示:内联块;
利润率:30像素;
填充:30px 60px;
颜色:白色;
字体大小:40px;
边界半径:20px;
文本阴影:0.20px rgba(0,0,0,0.3);
}
.Dragable源--正在拖动{
可见性:隐藏;
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
const sortable=new Draggable.sortable(
document.querySelector(“#xxx”){
可拖动:“span”,
}
)
在('sortable:start',()=>{
console.log('sortable:start')
})
sortable.on('sortable:sort',()=>{
log('sortable:sort')
})
sortable.on('sortable:sorted',()=>{
log('sortable:sorted')
})
sortable.on('sortable:stop',()=>{
console.log('sortable:stop')
})