title: Jquery draggable - mouseup not firing when cursor leaves object
body: <p>I created a draggable object that allows me to hide and show content when the object is dragged from left to right (to hide) then right to left (to show). The object can't go any further than left or right (containment:"parent"). The event is fired on mouseup. However, the mouseup only works if the mouse cursor stays on the object. If the mouseup event is fired when the cursor has left the object, it doesn't fire.</p>
  
  <p>Can someone help me find a way to trigger the mouseup even if the cursor has left the object? ANy help would be much appreciated. Here's a demo: <a href="http://www.madfrogdesigns.com/vault/mouseup/" rel="nofollow">http://www.madfrogdesigns.com/vault/mouseup/</a></p>
  
  <p>This is my jquery code:</p>
  
  <pre><code>$(document).ready(function(){
      initCheckBoxes();
  });
  
  var slideSpeed = 200;
  var leftDist = 20;
  
  function initCheckBoxes()
  {
      $(".toggle-slider").draggable({containment: "parent"});
      $(".toggle-slider").mouseup(function(){
  
      //Toggle markers;
      $(".content").fadeToggle(200);
  
      var status = $(this).attr("toggle-status");
  
      switch(status)
          {
              case "0":
              $(this).animate({left: leftDist}, slideSpeed);
              $(this).attr("toggle-status", "1");
              break;
  
              case "1":
              $(this).animate({left: "0"}, slideSpeed);
              $(this).attr("toggle-status", "0");
              break;
          }
      });
  }
  </code></pre>