Easy Split Layout Plugin For jQuery - Splitter drag event not firing

Question

Has anybody used the Easy Split Layout Plugin For jQuery as shown here? The ondrag, ondragstart, and ondragend events only fire once when the plugin is initialized. After that, nothing.

Here is my code:

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")
   });

When I refresh the browser (chrome), I see the three console.log outputs but when I drag the splitter bar, nothing.

Here are the dependencies:

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

Any ideas?

Answer 1

That works in fiddle:

I used:
https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.splitter.min.js
https://cdn.jsdelivr.net/npm/[email protected]/css/jquery.splitter.css
and 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();

Gives the position in console.log if you drag the divider