JQUERY UI draggable div

Question

我有一个可拖动的div，我想通过点击info链接打开/关闭。我正在使用Jquery UI拖动约束运动。这是我Fiddle code

<div id="containment-wrapper"> 
    <div class="draggable ui-widget-content"> 
     <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> 
    </div> 
</div> 

Answer 1

你可以只隐藏在负载拖动元素，并切换其可见性的信息链接，当点击：

$("#draggable3").hide().draggable({ 
    containment: "#containment-wrapper", 
    scroll: false 
}); 
$("#draggable5").draggable({ 
    containment: "parent" 
}); 
$("#showInfo").click(function(e){ 
    e.preventDefault(); 
    $("#draggable3").toggle(); 
}); 

更新jsFiddle

添加动画就像在toggle()函数中输入您希望持续的毫秒数一样简单。例如toggle(500)。

您还可以使用其他类型的动画，使用fadeToggle()或slideToggle()，同时指定毫秒数作为参数。

jsFiddle带淡入淡出的动画。

Answer 2

你可以给它的效果太像：

$("#draggable3").hide().draggable({ 
    containment: "#containment-wrapper", 
    scroll: false 
}); 
$("#draggable5").draggable({ 
    containment: "parent" 
}); 
$("#showInfo").click(function(e){ 
    e.preventDefault(); 
    if($("#draggable3").is(':visible')) 
    $("#draggable3").hide(500); 
    else 
     $("#draggable3").show(500); 
});