错误拖拽动作在IE浏览器，而在剧本

我已经实现在多个div拖，想停在相应的div拖动动作动态当鼠标离开股利触发鼠标向上事件。我上触发DIV鼠标向上事件，以便拖动停止，如下图所示：错误拖拽动作在IE浏览器，而在剧本

<!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几次来检查。

任何想法是怎么回事？请帮忙。

来源

2011-09-01 supi

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

鼠标向下DIV
移动鼠标或鼠标拖动
格鼠标拖动
鼠标移动出界
鼠标时被触发
DIV停止拖动或固定股利（和文本）
鼠标仍然是移动（这是一间非常短暂的瞬间，脚本触发哪里鼠标向上和当我们真正释放鼠标向上）
鼠标向上

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

来源

2011-09-02 14:00:06 supi

我也有这个问题;我正在拖动一个项目（被拖动的div内的图像），看起来当我停止拖动项目时，所有项目都会变成不可压缩状态，直到我点击该页面，然后再次变为活动状态。不知道如何解决这个问题，希望你可以给我一些指点，我会看看这些步骤，看看这是如何给我一个线索.. –

错误拖拽动作在IE浏览器，而在剧本

回答

相关问题