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); 
});