Question

It seems like Jquery dialog is in love with my mouse pointer.

I have a jqgrid and a few text boxes inside a div which i am using as a dialog.

Whenever i try to move the dialog by dragging, it sticks to the mouse pointer and does not let it go.

here is the code

$("#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() {
    }
});

how do i get around this?

Thanks

EDIT

Also when i open the dialogue, scrollbars appear on my page. when i open the dialog for the second time scrollbars appear on the dialog too.

EDIT 2

here is the grid

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>

Edit:3 Here is the 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

Here is a working jsfiddle using the code you supplied.

http://jsfiddle.net/6FWPc/

This works in both chrome and IE…

Can you confirm it works for you too?

EDIT
As Monkieboy says the mouse up event is happening outside of the browser so until you click again the dialog thinks you are still in the mouse down event.

All I can think of is making draggable false:

$("#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/

EDIT 2
You can use the mouseleave() event to register the mouseup() see fiddle

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

http://jsfiddle.net/s5D6J/