Disable split.js gutter from dragging

Question

As titled,

Am using Split.js to split 2 blocks contained within a parent block, as shown in the example code below

<div id="blocks" class="split-block">
    <div id="blockA" class="split split-horizontal">
        <!-- Block A content in here -->
    </div>
    <div id="blockB" class="split split-horizontal">
        <!-- Block B content in here -->
    </div>
</div>

And calling Split on blocks

// Split js for dividing between blockA and blockB
var split = Split(['#blockA', '#blockB'], {
    sizes: [50, 50],
    gutterSize: 20,
});

The way these 2 block works it then, when there is an event in blockA, blockB will start its processes and will be on loading mode, where i put a loading spinner on blockB using jquery-loading plugin. The spinner will stay on blockB until processes in blockB is complete.

During the processes time, i want the gutter that splits blockA and blockB to be non draggable, and becomes draggable again after blockB has completed its processes. How can i achieve this?

Answer 1

Library author here. You can call split.destroy() when blockB starts "loading mode" and then create the split again once blockB is complete.

This removes the gutter completely, but you can emulate a gutter with CSS on blockA or blockB border.

Answer 2

A less drastic approach than destroying and recreating the splits every time you want to disable dragging is to set pointer-events: none; on the gutter.

const split = new Split( [ '#a', '#b' ], {
   sizes: [ 50, 50 ],
} );

// disable drag
split.pairs.gutter.style.pointerEvents = 'none';

// enable drag
split.pairs.gutter.style.pointerEvents = 'all';

// or just hide the gutter
split.pairs.gutter.style.display= 'none';