遇到Jquery事件的麻烦.与其他jquery代码一起拖动

Question

我在这里遇到了相当多的问题，看看这个网站。当我点击灰色按钮时，它会显示出来，如果我再次点击它，它会隐藏起来。但是如果我拖拽(拖拽开始)按钮来显示我不能再点击打开或关闭的内容，我现在不知道出了什么问题。当我检查代码并单击按钮时，我可以看到。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代码更改为下面的代码，它可以工作(好吧，不是完美的，第一次它搞砸了，所以我不得不添加一个布尔值来跟踪它是否第一次运行)

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");
             }               
          });
    });

Answer 2

我认为一些适当的HTML和CSS你可以有一个动画而不是2。它们无论如何都向着同一个方向，对吧?

所以对于HTML部分，我会确保容器实际上包含一些东西。把它们包起来似乎是正确的方法。

对于CSS，我将主容器的position: relative和内容器的position: absolute组合在一起。查看小提琴以获得更多更改。设置好之后，我开始删除额外的动画。

实际的拖动可以用jQuery UI完成。是使用整个库还是只使用可拖动部分取决于你。

/// <reference path="jQuery 1.9.1" />
/// <reference path="jQuery UI 1.9.2" />
// local vars
var showing = false,
    nurseContainer = $('#nurseContainer'),
    nurseButton = $("#nurseContainer a.nursebutton"),
    nurseView = $("#nurseView");
// drag event: jquery ui can filter much for you
nurseContainer.draggable(
    { 
        axis: "x",
        handle: nurseButton,
        containment: nurseView,
        drag: function(ev, ui){
            // small css position correction
            if (ui.position.left <= 50){
                ui.position.left = 50;
            }
        }
    }
);
// click event: with mouseup you don't fire extra events
nurseButton.mouseup(function(){
    if (!showing) {
        showing = true;
        nurseContainer.animate({ left: 50 }, 400);
    } else {
        showing = false;
        nurseContainer.animate({ left: 325 }, 400); // 50 + 275
    }
});

注意，我使用尽可能少的字符串值，以保持它的干净和可读。希望您可以通过这个例子来调整您的需求。

http://jsfiddle.net/tive/AnVfh/

jQuery UI API http://api.jqueryui.com/draggable/