1

オブジェクトを左から右 (非表示) にドラッグし、次に右から左 (表示) にドラッグすると、コンテンツを非表示および表示できるドラッグ可能なオブジェクトを作成しました。オブジェクトは左または右より先に進むことはできません (containment:"parent")。イベントはマウスアップで発生します。ただし、マウスアップは、マウス カーソルがオブジェクト上にある場合にのみ機能します。カーソルがオブジェクトから離れたときに 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;
        }
    });
}
4

1 に答える 1

2

マウスアップが要素の外で発生した場合、そこから発生しないため、2 つの別個のイベントが必要です。

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;
    });
}
于 2012-04-25T17:38:21.843 に答える