第一次点击将 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>
最佳答案
因此，如果您想通过单击将 div 动画化到一个位置，然后能够将其拖回原来的位置，请在此处尝试:http://jsfiddle.net/xLBBP/8/
动画的点击处理程序是相同的，但现在还使 div 在被点击后可拖动。拖动仅限于 x 轴。然后你可以拖动 div，如果你把它拖回足够近的地方，它就会回到原来的位置。我还将 css 移动到 css Pane 并进行了一些修改，这可能会解决您在移动浏览器中遇到的问题(虽然可能不会...)。
我添加了一个变量来跟踪用户是否正在拖动，以防止拖动结束时的 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");
}
}
});
}
});
});
关于javascript - 鼠标 "click"和 "click-drag n release"都移动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21723560/