demo/draggablevstack.html

<!DOCTYPE html>
<html>

<head>
    <title>Draggable VStack</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>

    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <style>
        html, body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .dark.bg {
            background-color: rgba(30, 30, 32, 1);
            /* background-color: white; */
            color: white;

        }

        .bg {
            padding-top: 20px;
            padding-bottom: 20px;
            border: solid 1px rgb(30, 30, 32);
        }
    </style>
</head>

<body>
    <h1>Draggable VStack</h1>

    <div class="absol-bscroller" style="width: 80vw">
    </div>

    <script class="viewable">
        var range = absol._('div').addTo(document.body).addStyle({
            width: '80vw',
        });
        function updateRange() {
            range.clearChild();
            Array.prototype.forEach.call(mStack.childNodes, function (e) {
                var data = e.__data__;
                range.addChild(absol._('<span> ' + data.value + '</span>'));
            });
        }


        var mStack = absol._({
            tag: 'draggablevstack',
            child: Array(50).fill('').map(function (u, i) {
                return {
                    class: ['bg', i % 2 == 0 ? 'light' : 'dark'],
                    style: { position: 'relative' },
                    child: [{
                        tag: 'span',
                        child: { text: "Dòng " + i }
                    }, {
                        class: 'drag-zone',
                        style: {
                            position: 'absolute',
                            top: '2px',
                            right: '2px',
                            bottom: '2px',
                            border: 'solid 1px blue',
                            'background-color': 'transparent',
                            zIndex: '3'
                        },
                        child: { text: 'Hold and drag me' }//DragZone must contain class "drag-zone"
                    }].concat(i > 0 ? [] : [{
                        tag: 'draggablevstack',
                        child: Array(7).fill(0).map(function (v, j) {
                            return {
                                class: 'drag-zone',
                                child: { text: 'Tùy chọn ' + j }
                            }
                        })
                    }]),
                    props: {
                        __data__: {// to avoid overiding property of element
                            value: i
                        }
                    },

                }
            })
        });
        mStack.on('change', updateRange);
        mStack.addTo(absol.$('.absol-bscroller'));
        updateRange();


    </script>


    <script src="https://absol.cf/absol/demo/autohightlighting.js"></script>

</body>

</html>