Search code examples
jquerysplittermouseup

Fire event when jQuery Splitter drag stops

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.

Solution

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