.

VaKeR CYBER ARMY

Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol-acomp/demo/

Upload File :

Current File : /var/www/html/libs/absol-acomp/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>

VaKeR 2022