javascript - Jquery event.drag 与其他 jquery 代码一起使用时遇到问题

Question

我在这里遇到了很大的问题，请查看 this Website here 。当我点击灰色按钮时，它会显示，如果我再次点击它，它会隐藏。但是，如果我拖动(在拖动开始时)按钮来显示内容，我将无法再单击打开或关闭，我现在不知道出了什么问题。当我检查代码并单击按钮时，我可以看到 .nursebutton 更改了其值(从 0 -> 275 和 -275 -> 0)。我不知道什么可能导致函数 slideNurse() 无法正常执行。

我正在使用“扩展”jquery.event.drag与其他 Jquery 一起，也许这就是问题所在？你们有人遇到过这个问题吗？对于我的问题，您有一个聪明的替代解决方案吗？我想要拖动功能和“单击”功能动画。

下面是 jquery 代码。

谢谢=)

var showing = false;
jQuery(function($){
var $div = $('#container');
  $('.nursebutton')
      .drag("start",function( ev, dd ){
         dd.limit = $div.offset();
         dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();              
      })
      .drag(function( ev, dd ){
         $( this ).css({
            left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )

         });
         $('#nurseView').css({
            left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
        });
      })
      .drag("end",function(ev, dd ){
         var treshold = dd.offsetX;
         var menu = $('#nurseView');
         if(treshold>1712){
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
         }
         else{
            $("#nurseView").animate({"left": "1595px"}, "fast");
            $(".nursebutton").animate({"left": "1595px"}, "fast");
         }               
      });
});

function slideNurse(){//This function works before I "activate thejquery function above
    if (!showing) {
        showing = true;
        $("#nurseView").animate({"right": "+=275px"}, "slow");
        $(".nursebutton").animate({"right": "+=275px"}, "slow");
    } else {
        showing = false;
        $("#nurseView").animate({"right": "-=275px"}, "slow");
        $(".nursebutton").animate({"right": "-=275px"}, "slow");
    }
}

Answer 1

将 jquery 代码更改为下面的代码，它起作用了(不太完美，第一次它搞砸了，所以我必须添加一个 bool 值来跟踪它是否是第一次运行)

var showing = false;
var first = false;
    jQuery(function($){
    var $div = $('#DragNursecontainer');
      $('.nursebutton')
            .click(function(){
                if(first ==true){
            if (!showing) {
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
            } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
            }
                }
                else{
                    first = true;

                if (!showing) {
                showing = true;
                $("#nurseView").hide(5);
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $("#nurseView").show(5);
                $(".nursebutton").hide(5);
                $(".nursebutton").animate({"left": "1595px"}, "fast");
                $(".nursebutton").show(5);
                } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
                }   //slideNurse();
                }
          })
          .drag("start",function( ev, dd ){
             dd.limit = $div.offset();
             dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();              
          })
          .drag(function( ev, dd ){
             $( this ).css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )

             });
             $('#nurseView').css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });
          })
          .drag("end",function(ev, dd ){
             var treshold = dd.offsetX;
             var menu = $('#nurseView');
             if(treshold>1712){
                    showing = false;
                    $("#nurseView").animate({"left": "1872px"}, "fast");
                    $(".nursebutton").animate({"left": "1872px"}, "fast");
             }
             else{
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
             }               
          });
    });