1

サイズ変更時にマージン内にとどまるフローティングウィンドウを作成しようとしています。

あなたはコードをチェックアウトすることができます。

http://jsfiddle.net/jxgUU/6/

どうすればこれを達成できますか？

$(function()
{
    $("#result").draggable();
});    

#result 
{ 
    border:1px solid #000;
    width:375px;
    position:absolute;
    z-index:100;
    left:75%x;
    top:100px;
    margin-left: -10px;     
    margin-top:  -50px;   
    cursor:move;
    color:black;
}

<div id="result"  class="ui-widget-content" >
    <div style="background-color:#096db5;color:white;font-size:9px;text-align:center;">
        click window to drag
    </div>
    <div id="info">
        blah
    </div>
</div>
4

2 に答える 2

2

封じ込めオプションを設定します。

$("#result").draggable({ containment: "window" });

jsFiddleの例

于 2013-01-08T17:52:20.463 に答える
2

私はついに、サイズ変更のマージンに達したときにボックスを自動的に中央に配置するスクリプトを見つけました。

ソース：

http://jqueryui.com/position/#default

これが最終的なコードです。

$(window).resize(function(){
    $("#result").position({
        of: "#wrapper",
        my: "center  middle",
        at: "center middle",    
        collision: "fit flip"
    })//$("#result").position({
 });//$(window).resize(function(){
于 2013-01-09T21:41:51.267 に答える