Error in drag action in IE while triggering the mouse up event in script_问答_开发者

I have implemented drag on multiple divs and would like to stop the drag action on the corresponding div dynamically when the mouse leaves the div. I trigger the mouse up event on the div in order for the drag to stop as shown below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<style>
    #draggable1stColumn { width: 70px; height: 100%; float:left;}
    #draggable2ndColumn { width: 144px; height: 100%; float:left;}
    #draggable3rdColumn { width: 42px; height: 100%; float:left;}
    .spacerDiv { width: 8px; height: 100%; float:left; background-color:#FFFFFF;}   
    .containerDiv { position:relative; width: 320px; height: 214px; background-color:#00FFCC;}
    .innerDiv { top: 10px; left: 24px; position:absolute; width: 272px; height: 195px; background-color:#FF9933; overflow:hidden;} 
    .rowDiv { width: 100%; height: 39px; background-color:#CCCCCC;}
    .rowDivAlt { width: 100%; height: 39px; background-color:#999999;}
<开发者_Python百科;/style>
<script type="text/javascript">
$(function() {
    $( ".ui-widget-content" ).draggable({ axis: "y" });
});
</script>
</head>

<body>
    <div class="containerDiv">
        <div class="innerDiv">
            <div id="draggable1stColumn" class="ui-widget-content">
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
            </div>
            <div class="spacerDiv"></div>
            <div id="draggable2ndColumn" class="ui-widget-content">
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
            </div>
            <div class="spacerDiv"></div>
            <div id="draggable3rdColumn" class="ui-widget-content">
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
                <div class="rowDivAlt"></div>
                <div class="rowDiv"></div>
            </div>
        </div>
    </div><!-- End containerDiv -->
<script type="text/javascript">
$(".ui-widget-content").bind("mouseleave",function(){
    $(".ui-widget-content").mouseup();
});
</script>
</body>
</html>

The script seems to work fine in all the other browsers except for IE(I use IE 8). In IE, the script works fine so long as I do not trigger the mouse up from within the script(that is to say, the drag will stop and start again fine if I mouse up within the corresponding div dimensions). But once I move the mouse out(while still dragging the div) of the div, the drag action becomes unpredictable in IE. Its works at times and at other times, it doesnt. You will have to mouse out of the corresponding div a couple of times to check this.

Any idea whats going on?? Please help.

resolved. The answer becomes evident when you add some text to the divs that are being dragged. As soon as the mouse is dragged outside(to stop dragging by triggering the mouse up in the script), the div becomes stationary. Now if we examine again, these are the actions that took place:

mouse down on the div
mouse moves or mouse drags
div drags with mouse
mouse moves out of bounds
mouse up triggered
div stops dragging or stationary div(and text)
mouse still is moving(this is a very brief moment between, where the script triggers the mouse up and when we actually release the mouse up)
mouse up

Apparently steps 1, 2, 6, 7, 8 is what we usually do to select a text or UI element in the browser. So now the IE interprets this combined action as a select action and hence ends up selecting all the texts in the div and sometimes in other divs as well(and when there is no text, the invisible divs end up in selected state themselves). So when the div is dragged again, this selection causes it to cease the drag action. All we need to do is click somewhere on the page to deselect the selection and then the drag works fine again. Other browsers somehow remember the in-between steps and distinguish this from a select action and therefore do not have any issues.