Jquery draggable - 当光标离开对象时mouseup不会触发

Question

我创建了一个可拖动的对象，当对象从左向右（隐藏），然后从右向左（显示）拖动时，我可以隐藏和显示内容。对象不能超过左侧或右侧（遏制：“父母”）。该事件是在mouseup上触发的。但是，只有当鼠标光标停留在对象上时，mouseup才起作用。如果mouseup事件在光标离开对象时触发，它不会触发。

即使光标已离开对象，某人可以帮助我找到触发mouseup的方法吗？任何帮助将非常感激。这里有一个演示：http://www.madfrogdesigns.com/vault/mouseup/

这是我的jQuery代码：

$(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; 
     } 
    }); 
} 

Answer 1

需要两个独立的事件如果发生在元件的外部鼠标松开，因为它不会从那里起源：

function initCheckBoxes() 
{ 
    $(".toggle-slider").draggable({containment: "parent"}); 

    var slideMouseDown = false; 

    $('.toggle-slider').mousedown(function() { 
     slideMouseDown = true; 
    }); 


    $(document).mouseup(function() { 

     if(slideMouseDown == true) 
     { 
     //Toggle markers; 
     $('.content').fadeToggle(200); 

     var sliderToggle = $('.toggle-slider'); 
     var status = sliderToggle.attr('toggle-status'); 

     switch(status) 
     { 
      case "0": 
      //its off, slide it by 20px; 
      sliderToggle.animate({left: leftDist}, slideSpeed); 
      //change status to 1 
      sliderToggle.attr("toggle-status", "1"); 
      break; 

      case "1": 
      //its 'on', slide it to 0px; 
      sliderToggle.animate({left: "0"}, slideSpeed); 
      //change status to 0 
      sliderToggle.attr("toggle-status", "0"); 
      break; 
     } 
     } 

     slideMouseDown = false; 
    }); 
}