Question

第一次单击将d div d1滑动到右侧。 Nw仅适用于左侧幻灯片，我希望鼠标“单击”和“单击并拖动并释放”到原始位置。我只需点击一下就可以将div d1滑动到原来的位置，但我希望它通过点击拖动和释放来移动。

简单来说在我下面的给定代码中，我想进一步将id为d1的div滑回同一个原始位置，必须通过鼠标点击拖动释放方法完成。请记住，通过单击div d2更改div d1位置后会发生这种情况。

<html>
<head><title></title><script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" language="javascript"> //<![CDATA[

$(document).ready(function(){   $("#d2").click(function(){
   if($("#d1").css("left") <="-131px") 
        {
       $("#d1").animate({left:'250px'});        
        }   
     else   {
    $("#d1").animate({left:'-131px'});      
                }   
  }); 

  $('#d1').draggable({
cursor: 'move',
containment: '#dd'      // sets to can be dragged only within its parent
 }); 



  });

  //]]> </script>

</head>
<body>
<div style="width:531px;height:301px; background:#a7daa8;">
<div id="dd" style="width:530px;height:300px;">
<div id="d1" style="position:absolute; left:-131px;">
<div style="float:left; background:#a90000;" >hidden div on left------</div>
<div id="d2"  style=" float:left;background:#ccc; height: 300px;" >click here to slide the div</div>
</div>
</div>
</div>



</body>
 </html>

Answer 1

因此，如果您想点击将div设置为一个地方的动画，然后将其拖回原来的位置，请在此处尝试：http://jsfiddle.net/xLBBP/8/

动画的点击处理程序是相同的，但现在也可以在单击后使div可拖动。拖动仅限于x轴。然后你可以拖动div，如果你把它拖回到足够的位置，然后它会动画回到原来的位置。我还将css移到css窗格并进行了一些修改，这可能会解决您在移动浏览器中遇到的问题（尽管可能不会......）。

我添加了一个变量来跟踪用户是否正在拖动，以防止拖动结束时的鼠标触发动画回到原始位置。因此，现在您可以将div拖回原始位置，或者单击它以将动画触发回原始位置。

现在还有一个变量snapBackDistance，因此您可以设置距离其原始起始位置的距离，如果您拖动然后释放，它将从中设置动画。您可以使用它来设置您满意的值。

var isDragging = false;
var snapBackDistance = -125;

$(document).ready(function(){   
    $("#d2").click(function(){
        if (!$('#d1').is('.ui-draggable-dragging')){
            if(isDragging == false){
                 $("#d1").animate({left:'-131px'});   
            }   
            isDragging = false;
        }
        if($("#d1").css("left") <="-131px"){
            $("#d1").animate({left:'131px'});
            $("#d1").draggable({ 
                axis: "x",
                start: function( event, ui ) {
                    isDragging = true;
                },
                stop: function( event, ui ) {
                    if(parseInt($("#d1").css("left")) < snapBackDistance){
                        $("#d1").animate({left:'-131px'});
                        $("#d1").draggable("destroy");
                    }
                }
            });
        }   
    }); 
});

鼠标“点击”和“点击拖动n释放”到shft div

1 个答案: