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

第一次点击幻灯片d div d1到右侧。 Nw只用于左侧滑动，我希望鼠标“点击”和“点击并拖动并释放”到原始位置。我可以通过点击将div d1滑动到其原始位置，但我希望它通过点击拖动并释放。鼠标“点击”和“点击拖动n释放”到shft div

简而言之在我给出的代码下面，我想进一步将id d1的div滑动回原来的位置，这个位置必须通过鼠标点击拖动释放方法来完成。记住这将发生在div d1位置通过点击div d2而改变之后。

<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>

来源

2014-02-12 user3292824

所以，如果你想点击到div动画到一个地方，然后可以将其拖回到它是从哪里来的，这里试试这个：http://jsfiddle.net/xLBBP/8/

的单击处理程序动画是相同的，但现在也可以使div在被点击后拖动。拖动仅限于x轴。然后，您可以拖动div，如果将其拖回足够接近它的位置，则它会回到其原始位置。我也将CSS移到了CSS窗格中，并作了一些修改，这可能会修复您在移动浏览器中遇到的问题（它可能不会，但是......）。

我已经添加了一个变量来跟踪用户是否在拖动，以防止拖动结束时的mouseup触发动画回到原始位置。所以，现在你可以将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"); 
        } 
       } 
      }); 
     } 
    }); 
});

来源

2014-02-12 10:55:23 ilikeprogramming

我做了一些改变，我的问题上面更好的理解，也增加了一个问题，这是另一个问题IM面临 – user3292824

不，这不是在所有的正确答案 – user3292824

好了，你的意思是你只是想能够将其拖回原来的位置？如果是这样的话，如果有人只是部分地拖回来，你会发生什么？ – ilikeprogramming

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

回答

相关问题