Question

似乎Jquery对话框已经爱上了我的鼠标指针。

我在div中有一个jqgrid和几个文本框，我将其用作对话框。

每当我尝试通过拖动来移动对话框时，它会粘在鼠标指针上并且不会让它移动。

这是代码

$("#Applon").dialog({
    autoOpen: false,
    height: 370,
    width: 710,
    modal: true,
    buttons: {
        //'Create an account': function() { },
        Close: function() {
            $(this).dialog('close');
            //$('input:visible:enabled:first').focus();
        }
    },
    close: function() {
    }
});

我该如何解决这个问题？

由于

修改

当我打开对话框时，滚动条会出现在我的页面上。当我第二次打开对话框时，滚动条也出现在对话框中。

编辑2

这是网格

jQuery('#jgrid2').jqGrid({
    autowidth: true,
    altRows: true,
    altclass: 'grdAltRwClr',
    datatype: 'local',
    forceFit: true,
    gridview: true,
    mtype: 'post',
    height: 190,
    //width: 350,
    rowNum: 0,
    postData: { p_hdrid: function() { return $('#p_hdrid').val(); } },
    url: window.rootPath + 'Invoice/JGridDtlData',
    beforeSelectRow: function() { return false; },
    gridComplete: function() {
        GridComplete2();
    },
    colModel: [
        { name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 8, index: 'act' }
        , { name: 'p_slabid', label: 'Slab ID', width: 15, index: 'p_slabid' }
        , { name: 'p_fslab', label: 'From', width: 15, index: 'p_fslab', sortable: false }
        , { name: 'p_tslab', label: 'Upto', width: 15, index: 'p_tslab', sortable: false }
        , { name: 'p_amt', label: 'Amount', width: 15, index: 'p_amt', sortable: false }

         ]
});

HTML

    <div id="Applon" title="Edit Slab Details" style="border-style: 1px; width: 680px; height:370px; background-color: #00CC99; z-index: 999; display: block; padding-left: 10px;">
    <div class="content">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                <form action="\" id="frmDtl">
                    <table cellpadding="0" cellspacing="0">
                       ....controls go here

                    </table>
                </form>
                </td>

            </tr>
        </table>
    </div>
    <div class="content" style="width: 690px">
        <table id="jgrid2">
        </table>
        <div id="pager2">
        </div>
    </div>

    </div>

修改：3这是CSS

element.style {
    -moz-user-select: none;
}
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
jquery...s?v=5.3 (line 12)
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
jquery...s?v=5.3 (line 417)
.ui-dialog .ui-dialog-titlebar {
    font-size: 1.1em;
    padding: 2px 2px 2px 10px;
    position: relative;
}
jquery...s?v=5.3 (line 391)
.ui-dialog-titlebar {
    background-color: #5D81AB;
    background-image: url("../../Images/ThkStrip.jpg");
    background-repeat: repeat-x;
}
Sales_...s?v=5.3 (line 1436)
.ui-corner-all {
    border-radius: 6px 6px 6px 6px;
}
jquery...s?v=5.3 (line 282)
.ui-widget-header {
    border: 1px solid #C4D1E7;
    color: #222222;
    font-weight: bold;
}
jquery...s?v=5.3 (line 55)
.ui-helper-clearfix {
    display: block;
}

Answer 1

这是使用您提供的代码的工作jsfiddle。

http://jsfiddle.net/6FWPc/

这适用于chrome和IE ......

你能确认它对你有用吗？

修改正如Monkieboy所说，鼠标悬停事件发生在浏览器之外，所以在你再次点击之前，对话框认为你仍处于鼠标按下事件中。

我所能想到的只是制造可拖延的错误：

$("#Applon").dialog({ autoOpen: false, height: 370, width: 710, modal: true, draggable: false, buttons: { //'Create an account': function() { }, Close: function() { $(this).dialog('close'); //$('input:visible:enabled:first').focus(); } }, close: function() { }

}）;

http://jsfiddle.net/cumsL/

编辑2 您可以使用mouseleave（）事件注册mouseup（）参见小提琴

$('document').ready(function() { $("#main").mouseleave(function() { $(this).mouseup(); }); });

http://jsfiddle.net/s5D6J/

Answer 2

从Craftyfellas延伸回答.....

$('document').ready(function() {
     $("#main").mouseleave(function()
                           {
                               $(this).mouseup();
                           });
});

实际上哪个很酷，您实际上可以将它与live()函数绑定，以便所有其他对话框也捕获此行为。像这样：

$('document').ready(function() {
    $("#main").live("mouseleave", function() {
       $(this).mouseup();
    });
});

或者，您可以扩展dialog，以便说明不受欢迎的行为。

粘滞的jquery-ui对话框不会让鼠标指针移动

2 个答案: