解决方案 »

  1.   

    像这样初始话和拖拽的时候向下拉出现滚动条,但是jquery ui好像控制在边框不允许出现滚动条
      

  2.   

    jquery-ui-1.9的draggable可以拖拽超出当前视窗dialog好像不行,要不你试试给dialog增加draggable试试~
      

  3.   


    怎么增加啊,是在draggable属性里面增加一个function么
      

  4.   

    这样可以,好像不是很好。
    $(".ui-dialog").draggable("option","containment",false);他没接口。
    jquery.ui.dialog.js中
    写死了。  containment: "document",
    this.uiDialog.draggable({
    cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
    handle: ".ui-dialog-titlebar",
    containment: "document",

    start: function( event, ui ) {
    $( this ).addClass("ui-dialog-dragging");
    that._blockFrames();
    that._trigger( "dragStart", event, filteredUi( ui ) );
    },
    drag: function( event, ui ) {
    that._trigger( "drag", event, filteredUi( ui ) );
    },
    stop: function( event, ui ) {
    options.position = [
    ui.position.left - that.document.scrollLeft(),
    ui.position.top - that.document.scrollTop()
    ];
    $( this ).removeClass("ui-dialog-dragging");
    that._unblockFrames();
    that._trigger( "dragStop", event, filteredUi( ui ) );
    }

    });
      

  5.   

    可以,赞一个,还有初始化的时候想要在当前视窗之外的需要修改jquery.ui.dialog.js 里面的
    using: function( pos ) {
    var topOffset = $( this ).css( pos ).offset().top;
    $( this ).css( "top",700 ); // 需要修改要该这里,妈蛋
    if ( topOffset < 0 ) {
    $( this ).css( "top", pos.top - topOffset );
    }
    }
      

  6.   

    设置dialog不可以拖动,然后获取容器增加draggable
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.8.2.js"></script>
    <script src="../../external/jquery.bgiframe-2.1.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.resizable.js"></script>
    <script src="../../ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
        $(function () {
    //////////////////注意这里要获取到父容器,而不是dialog对象,jquery UI会增加一个div容器来括起id=dialog的对象
            $("#dialog").dialog({ draggable: false }).closest('.ui-dialog').draggable();
        });
    </script>
    </head>
    <body><div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div><div class="demo-description">
    <p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe.  It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
    </div>
    </body>
    </html>
      

  7.   

    刚才研究了下,初始化显示在当前视窗之外可以dialog.js中修改collision属性
    position: {
    my: "center",
    at: "center",
    of: window,
    collision: "flip",// 默认是fit,在position.js中数组的属性
    // Ensure the titlebar is always visible
    using: function( pos ) {
    var topOffset = $( this ).css( pos ).offset().top;
    if ( topOffset < 0 ) {
    $( this ).css( "top", pos.top - topOffset );
    }
    }
    },