鼠標「點擊」和「點擊拖動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

回答

相關問題