.

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/draggablevstack2.html

<!DOCTYPE html>
<html>

<head>
    <title>Draggable VStack</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <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>
    <style>
        .item {
            height: 70px;
            position: relative;
            box-sizing: border-box;
            border: 1px solid gray;
        }

        .item > .drag-zone {
            position: absolute;
            right: 0;
            top: 0;
            width: 30%;
            bottom: 0;
            /*background-color: #8cc6af;*/
        }

        .item > span {
            line-height: 1.5;
            font-size: 2em;
        }

        .stack {
            margin-bottom: 1.5em;
            border: 1px solid black;
            width: 80vw;
        }

    </style>
</head>

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

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

<script class="viewable">
    var _ = absol._;
    var $ = absol.$;

    function createOab(color) {
        return {
            tag: 'draggablevstack',
            class: 'stack',
            props: {
                friends: '.stack'
            },

            child: Array(10).fill('').map((u, i) => ({
                class: 'item',
                child: [`<span>${i}</span>`,
                    {
                        class: 'drag-zone',
                        style: {
                            background: color
                        },
                        child: { text: 'Drag zone' }
                    }
                ]
            })),
            on: {
                itemleave: function (event) {
                    console.log(event);
                },
                itementer: function (event) {
                    console.log(event);
                },
                orderchange: function (event) {
                    console.log(event);
                },
                change: function (event) {
                    console.log(event);
                }
            }

        };
    }

    var stack0 = _(createOab('rgba(255, 100, 100,0.5)')).addTo(document.body);
    var stack1 = _(createOab('rgba(100, 100, 250,0.5)')).addTo(document.body);

</script>
</body>

</html>

VaKeR 2022