Jquery draggable - мышь не срабатывает, когда курсор покидает объект

Я создал перетаскиваемый объект, который позволяет мне скрывать и отображать содержимое, когда объект перетаскивается слева направо (чтобы скрыть), а затем справа налево (чтобы показать). Объект не может двигаться дальше, чем влево или вправо (содержание: «родительский»). Событие запускается при наведении мыши. Однако наведение мыши работает только в том случае, если курсор мыши остается на объекте. Если событие 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;
        }
    });
}

jquery draggable mouseup
person Julesfrog    schedule 25.04.2012    source источник
comment
Рассмотрите возможность использования события drop из метода droppable из пользовательского интерфейса jquery.   -  person Toni Michel Caubet    schedule 25.04.2012

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужны два отдельных события, поскольку, если наведение мыши происходит за пределами элемента, оно не будет происходить оттуда:

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;
    });
}
person Dominic    schedule 25.04.2012
comment
Спасибо за помощь infensus. К сожалению, это не сработало для меня. Может быть, это потому, что я неправильно обновил свой существующий код вашим. Как я могу использовать ваш код в сочетании с моим? - person Julesfrog; 25.04.2012