Capturing Drag Events in the jQuery Splitter

Environment

Product	Splitter for Progress® Kendo UI®
Version	Current

Description

I want to capture drag events while using the jQuery Splitter component, similar to the sizeChange event in the Kendo UI for Angular Splitter. I have attempted to attach events to kendoDraggable, bind to layoutChange, and other methods, but none have successfully captured real-time drag events for the Splitbar.

This knowledge base article also answers the following questions:

• How can I capture the drag event while resizing a Splitbar in the jQuery Splitter?
• Is it possible to bind drag events to the Splitbar in the jQuery Splitter?
• What is the correct approach to handle Splitbar drag events in the jQuery Splitter?

Solution

To capture drag events for the Splitbar in the jQuery Splitter, you need to access the Draggable widget of the Splitbar and bind to its drag, dragstart, and dragend events. Below is an implementation example:

Example Code

javascript

$(document).ready(function() {
    var splitter = $("#splitter").kendoSplitter().data("kendoSplitter");

    // Access the Draggable widget of the Splitbar
    splitter.resizing._resizable.draggable.bind("drag", function(e) {
        console.log("Drag event triggered");
    });

    splitter.resizing._resizable.draggable.bind("dragend", function(e) {
        console.log("Drag ended");
    });
});

This approach allows you to handle the drag events as the Splitbar is moved, enabling real-time tracking during resizing.

Dojo Example

For a live demonstration, refer to the following Dojo example:

<div id="splitter">
      <div>Pane A</div>
      <div>Pane B</div>
    </div>
    <script>
      $(document).ready(function () {
        var splitter = $("#splitter")
          .kendoSplitter({
            panes: [{ collapsible: true }, {}],
            resize: function (e) {
              /* The result can be observed in the DevTools(F12) console of the browser. */
              console.log("Splitter pane has been resized");
            }
          })
          .data("kendoSplitter");

        // Access the Draggable widget of the Splitbar
        splitter.resizing._resizable.draggable.bind("dragstart", function (e) {
          console.log("Drag started");
        });

        splitter.resizing._resizable.draggable.bind("drag", function (e) {
          console.log(e);
          console.log("Drag started");
        });

        splitter.resizing._resizable.draggable.bind("dragend", function (e) {
          console.log("Drag ended");
        });
      });
    </script>

See Also

• Kendo UI for jQuery Splitter Documentation
• Kendo UI jQuery Draggable API Documentation