Shopify 可拖动库的简单“hello world”示例

Question

寻找使用 Shopify 的 Draggable 库的一组可排序元素的简单工作示例。捆绑的示例对我来说不够简单。

Answer 1

这就是您正在寻找的。

const sortable = new Draggable.Sortable(
  document.querySelector('#d1'), {
    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')
})

body {
  margin: 10px;
}
#d1>span {
  display: inline-block;
  margin: 5px;
  padding: 5px 20px;
  color: white;
  font-size: 28px;
  border-radius: 10px;
  text-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.draggable-source--is-dragging {
  visibility: hidden;
}

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
<div id="d1">
    <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>