2012-03-09 15 views
0

jQuery UIライブラリのドラッグ可能なイベントをポップアップウィンドウに適用します。ドラッグはうまくいきますが、ウィンドウにスクロールがあり、スクロールドラッグイベントがトリガーされ、ポップアップが移動され、ドラッグイベントがスクロールイベントが解放されても解放されない場合、問題があります。それを克服するためにどのように...Jquery UIのドラッグ可能なイベントがスクロール時に解放されない

ここに私のコードスニペットはある.....チェックし、私はあなたがその問題を回避するために、ハンドラを使用したい場合があり、エラー

<html> 
<head> 
    <title> New Document </title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content=""> 

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" ></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script> 

<style> 
    #Outer{ 
    width:400px; 
    height:100px; 
    border:1px solid blue; 
    position:absolute; 
    overflow:auto; 
    } 
    #Hdr{ 
    background:#ffcc99; 
    border-bottom:1px solid blue; 
    } 
</style> 
</head> 

<body> 
    <div id="Outer"> 
    <div id="Hdr">About India</div> 
    <div> 
     The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP). 
     Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a 
     newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare. 
    </div> 
    </div> 
    </body> 

    <script> 
    $(document).ready(function(){ 
    $('#Outer').draggable(); 
    }); 
    </script> 
</html> 

答えて

3

何を聞かせてください。同様にここにfiddle

HTML:

<div id="Outer"> 
    <div id="Hdr">About India</div> 
    <div id="Inner"> 
     The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP). 
     Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a 
     newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare. 
    </div> 
    </div> 

CSS:

#Outer{ 
    width:400px; 
    border:1px solid blue; 
    position:absolute; 
    } 
#Inner { 
    width:400px; 
    height:80px; 
    position:absolute; 
    border:1px solid blue; 
    overflow:auto; 
} 
    #Hdr{ 
    background:#ffcc99; 
    border-bottom:1px solid blue; 
    } 

JS:

$(document).ready(function(){ 
     $('#Outer').draggable({handle: "#Hdr"}); 
    }); 
関連する問題