Fire event when jQuery Splitter drag stops

Question

I am using jQuery Splitter plugin from https://github.com/jcubic/jquery.splitter. Splitter works fine. I need to know how can I fire some event as soon as I stop drag of splitter. I need to preserve new splitter left position in back-end and use it next time.

mouseup, mousemove events are not working as desired. Below is the method which I tried. It only works when mouse is clicked on splitter without dragging it (Mouse click at same position). Once you drag splitter, this do not work.

      jQuery('.vspliter').on("mouseup", function (e) {
            alert('Mouse is released now');
                    // call ajax function over here
      });

Let me know, if more information is needed.

Answer 1

I am able to resolve this using below code by detecting drag:

       var isDragging = false;
       jQuery('.spliter_panel').mousedown(function() {
           jQuery('.spliter_panel').mousemove(function() {
               isDragging = true;
               jQuery('.spliter_panel').unbind("mousemove");
           });
       });
       jQuery('.spliter_panel').mouseup(function() {
           var wasDragging = isDragging;
           isDragging = false;
           jQuery('.spliter_panel').unbind("mousemove");
           if (wasDragging) {
                //Call Ajax method
           }
       });

Answer 2

The settings for the splitter surface handlers for onDragStart, onDragEnd and onDrag already, so I was able to get position information simply by:

 $('.MySplitter').split({
     orientation: 'vertical',
     limit: 10,
     onDragEnd: getSplitterLocation
 });

 function getSplitterLocation(e) {
     console.log(e);  // jQuery.Event
 }

Maybe this was added to the splitter after the original question was posed...