Question

我的网站基本上有7个可扩展的DIV，用户可以扩展和关闭。

在页面的末尾是一个提交按钮，链接到一个JQuery对话框，它基本上确认了提交。

发生的事情是JQuery对话框跳了下来，经常看起来已经消失，这使得用户无法提交表单。它跳跃的数量取决于扩展的DIV的大小。

JS FIDDLE： http://jsfiddle.net/Ltw78/1/

HTML：

<p>1. Click "Submit" to get the dialog box to appear, drag it around and you will notice it works normally. Close the dialog box after. </p>
<div id="clickme">2. Click here to expand the first box.</div>
<div id="clickme2">3. Click here to expand the second box</div>
<p>4. Scroll down to the submit button and click "Submit" again to get the dialog to appear. Now drag it around, and you will notice it jumps down the page quite a bit.  </p>
<div id="movingDiv">Some content
    <br />Some content
    <br />Some content
    <br />Some content
    <br />
</div>
<div id="movingDiv2">More content
    <br/>More content
    <br/>More content
    <br/>More content</div>
<div id="dialog" title="You have clicked submit. You now have two choices:">
    <p class="black">1) Do you want to submit this form as a new Booking for feedback services?
        <br />Then click <u>Submit.</u>

    </p>
    <p class="black">2) Do you want to submit this form as an amendment to a previous Booking Form submitted?
        <br />Then click <u>Overwrite.</u>

    </p>
</div>
<input type="button" id="submitButton" value="Submit" class="formbutton submitbutton" />

JS：

$("#dialog").dialog({
    autoOpen: false,
    minWidth: 550,
    buttons: [{
        text: "Overwrite",
        click: function () {
            $(this).dialog("close");
            $('#Overwrite').submit();
        }
    }, {
        text: "Submit",
        click: function () {
            $(this).dialog("close");
            $('#Submit').submit();
        }
    }]

});
$("#submitButton").click(function () {
    $("#dialog").dialog("open");
    $('.ui-dialog :button').blur();
});

$("#clickme").click(function () {
    $("#movingDiv").slideDown("slow", function () {

    });
});
$("#clickme2").click(function () {
    $("#movingDiv2").slideDown("slow", function () {

    });
});

CSS：

#movingDiv, #movingDiv2 {
    height:500px;
    background-color:#e4e4e4;
    display:none;
    padding:10px;
}

Answer 1

显然，这是JQuery UI对话框的一个未修复的错误。

解决方法是使用以下方法禁用拖动：

$( ".selector" ).dialog({ draggable: false });

Answer 2

这是一种保留draggable。

功能的解决方法

drag事件也跟踪CSS position和offset，考虑到可扩展divs，CSS position不期待更改父母身高，据说你仍然可以依靠offset将其设为真position。

首先，我们需要初始化drag回调;

$("#dialog").dialog({
    autoOpen: false,
    minWidth: 550,
    drag: function( event, ui ) {}, //added line
    buttons: [{
      text: "Overwrite",
      click: function () {
        $(this).dialog("close");
        $('#Overwrite').submit();
      }
    }, {
      text: "Submit",
      click: function () {
        $(this).dialog("close");
        $('#Submit').submit();
      }
    }]

});

之后，我们绑定一个事件监听器，强制拖动的对话框的position为offset：

$( "#dialog" ).on( "dialogdrag", function( event, ui ) {
  ui.position.top = ui.offset.top
} );

FIDDLE此处

JQuery UI - 对话框无法使用可扩展DIV正确拖动

2 个答案: