錯誤拖拽動作在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瀏覽器，而在劇本

回答

相關問題