Простой пример "Привет, мир" для перетаскиваемой библиотеки Shopify - PullRequest
Новая
       11

Простой пример "Привет, мир" для перетаскиваемой библиотеки Shopify

0 голосов
/ 06 декабря 2018

Ищем простой рабочий пример набора сортируемых элементов, используя библиотеку Shopify Draggable .Приведенные примеры не достаточно просты для меня.

1 Ответ

0 голосов
/ 06 декабря 2018

Это то, что вы ищете. 

<!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>

https://codepen.io/brettdonald/live/zMVMjd

...