禁用 split.js 排水沟拖动

Posted

技术标签:

【中文标题】禁用 split.js 排水沟拖动【英文标题】:Disable split.js gutter from dragging 【发布时间】:2018-07-03 01:01:39 【问题描述】:

如题,

我正在使用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 js for dividing between blockA and blockB
var split = Split(['#blockA', '#blockB'], 
    sizes: [50, 50],
    gutterSize: 20,
);

然后,这 2 个块的工作方式是,当块 A 中发生事件时,块 B 将启动其进程并处于加载模式,我使用 jquery-loading plugin 在块 B 上放置一个加载微调器。微调器将停留在 blockB 上,直到 blockB 中的进程完成。

在处理期间,我希望分割 blockA 和 blockB 的排水沟不可拖动,并在 blockB 完成其处理后再次变为可拖动。我怎样才能做到这一点?

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

【参考方案2】:

与每次要禁用拖动时销毁和重新创建拆分相比,一种不那么激烈的方法是在排水沟上设置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';

【讨论】:

以上是关于禁用 split.js 排水沟拖动的主要内容,如果未能解决你的问题,请参考以下文章

滚动可拖动项目的内容时禁用jQuery拖动

KineticJS:禁用拖动

禁用 jQueryUI 中嵌套可排序项的拖动冒泡

Android Google Maps:禁用 MapFragment 中的拖动

禁用滑动以在 UIWebView 上滚动但保留拖动/平移

jquery 可拖动启用和禁用