Question

我已经在多个div上实现了拖动，并希望在鼠标离开div时动态停止相应div上的拖动操作。我在div上触发鼠标按下事件，以便拖动停止，如下所示：

    <!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;}
</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>

除IE之外，该脚本似乎在所有其他浏览器中都能正常工作（我使用的是IE 8）。在IE中，只要我不从脚本中触发鼠标，脚本就可以正常工作（也就是说，如果我在相应的div维度内鼠标移动，则拖动将停止并再次启动）。但是一旦我将鼠标移出（同时仍然拖动div），拖动动作在IE中变得不可预测。它的作品有时和其他时候，它没有。您将不得不将鼠标移出相应的div几次以检查这一点。

有什么想法吗？请帮忙。

Answer 1

解决。当您向正在拖动的div添加一些文本时，答案会变得明显。只要将鼠标拖到外面（通过在脚本中触发鼠标停止拖动），div就会静止不动。现在，如果我们再次检查，这些是发生的行动：

鼠标按下div
鼠标移动或鼠标拖动
使用鼠标拖动div
鼠标移出界限
触发鼠标
div停止拖动或固定div（和文本）
鼠标仍然在移动（这是一个非常短暂的时刻，脚本触发鼠标向上，当我们实际释放鼠标时）
鼠标

显然，我们通常会在浏览器中选择文本或UI元素，执行步骤1,2,6,7,8。因此，现在IE将这个组合动作解释为选择动作，因此最终选择div中的所有文本，有时也选择其他div中（并且当没有文本时，不可见的div本身最终处于选定状态）。因此，当再次拖动div时，此选择会使其停止拖动操作。我们需要做的就是单击页面上的某个位置取消选择选项，然后拖动再次正常工作。其他浏览器以某种方式记住中间步骤并将其与选择操作区分开来，因此没有任何问题。

在脚本中触发鼠标向上事件时，IE中的拖动操作出错

1 个答案: