用于 jQuery 的简易拆分布局插件 - 拆分器拖动事件未触发答案

【问题标题】：Easy Split Layout Plugin For jQuery - Splitter drag event not firing用于 jQuery 的简易拆分布局插件 - 拆分器拖动事件未触发
【发布时间】：2021-03-26 20:19:36
【问题描述】：

有人使用过here 所示的用于 jQuery 的 Easy Split Layout 插件吗？ ondrag、ondragstart 和 ondragend 事件仅在插件初始化时触发一次。之后就什么都没有了。

这是我的代码：

function setSplitters() {
   $('#widget').width(1500).height(768).split({ //left container
       orientation: 'vertical', 
       limit: 150,
       position: '20%',
       onDrag: console.log("dragging..."),   
       onDragStart: console.log("dragging has started"),
       onDragEnd: console.log("dragging has ended")
   });

当我刷新浏览器 (chrome) 时，我看到三个 console.log 输出，但是当我拖动分隔栏时，什么也没有。

以下是依赖项：

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.splitter.js"></script>

有什么想法吗？

【问题讨论】：

标签： javascript jquery splitter

【解决方案1】：

这在小提琴中有效：

我用过：
https://cdn.jsdelivr.net/npm/jquery.splitter@0.28.5/js/jquery.splitter.min.js
https://cdn.jsdelivr.net/npm/jquery.splitter@0.28.5/css/jquery.splitter.css
和 jQuery 3.4.1

HTML

<div id="widget">
    <div id="leftPane">Foo</div>
    <div id="rightPane">Bar</div>
</div>

jQuery

function setSplitters() {
   var splitter = $('#widget').width(1500).height(768).split({
    orientation: 'vertical',
    limit: 150,
    position: '20%',
    onDrag: function(event) {
      console.log(splitter.position());
    },
    onDragStart: console.log("dragging has started"),
    onDragEnd: console.log("dragging has ended")
  });
}

setSplitters();

如果拖动分隔线，则在 console.log 中给出位置

【讨论】：

谢谢！如果他们能提供文件当然会很好。