[JavaScript] 圈選: Selecto.js

日期：
Selecto.js

Selecto.js web

Selecto.js是一款JavaScript開發的範圍選擇套件，可指定區塊元素內的進行範圍選擇與取消，亦可支援點擊或shift組合鍵進行加選或xor選擇，功能簡單易於使用。


以下為單html檔測試範例︰
<html>
    <head>
        <title>Selecto.js demo</title>

        <script src="https://cdn.jsdelivr.net/npm/selecto@1.1.2/dist/selecto.min.js"></script>

        <style>
            .panel {
                padding: 100px;
                width: 400px;
            }
            .cube {
                display: inline-block;
                margin: 5px;
                width: 30px;
                height: 30px;
                background-color: #aaa;
            }
            .selected {
                background-color: #f26;
            }
        </style>

    </head>
    <body onKeyDown="keydown(event)" onKeyUp="keyup(event)">
    
        <div class="panel">
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div id="msg"></div>
        </div>

        <script>

            let selecto = new Selecto({
               
                container: document.querySelector('.panel'), // The container to add a selection element
               
                //dragContainer: Element, // The area to drag selection element (default: container)
                
                //selectableTargets: [".target", document.querySelector(".target2")], // Targets to select. You can register a queryselector or an Element.
                selectableTargets: ['.cube'],

                selectByClick: true, // Whether to select by click (default: true)
               
                selectFromInside: false, // Whether to select from the target inside (default: true)
               
                continueSelect: false, // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
                
                toggleContinueSelect: "shift", // Determines which key to continue selecting the next target via keydown and keyup.
               
                //keyContainer: window,  // The container for keydown and keyup events
                
                hitRate: 100, // The rate at which the target overlaps the drag area to be selected. (default: 100)

            });

            selecto.on("select", function(e){
                e.added.forEach(function(el){
                    el.classList.add("selected");
                });
                e.removed.forEach(function(el){
                    el.classList.remove("selected");
                });
            });
            
        </script>
        
        <script>
            function keydown(e){
                console.log('keydown',e.key)
                document.querySelector('#msg').innerHTML='keydown: ' + e.key
            }
            function keyup(e){
                console.log('keyup',e.key)
                document.querySelector('#msg').innerHTML=''
            }
        </script>
        
    </body>
</html>


載入後畫面為︰



#Selecto.js, 範圍, 選擇



留言

張貼留言