从拖动中禁用split.js gutter

时间:2018-01-24 04:21:35

标签: javascript jquery

标题为

使用Split.js分割父块中包含的2个块,如下面的示例代码所示

<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>

在块上调用Split

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

这两个块的工作方式然后,当blockA中有一个事件时,blockB将启动它的进程并处于加载模式,我使用jquery-loading plugin在blockB上放置一个加载微调器。微调器将保持在blockB上,直到blockB中的进程完成。

在处理时间期间,我希望将blockA和blockB拆分为不可拖动的装订线,并在blockB完成其处理后再次变为可拖动。我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:0)

图书馆作者在这里。当blockB启动“加载模式”时,您可以调用split.destroy(),然后在blockB完成后再次创建拆分。

这样可以完全移除装订线,但您可以在blockA或blockB边框上使用CSS模拟装订线。

答案 1 :(得分:0)

与每次要禁用拖动操作销毁并重新创建拆分相比,一种不那么激进的方法是在排水沟上设置pointer-events: none;

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';