2012年11月2日 星期五
MouseDown之後的MouseMove時（拖動），控制滑鼠游標注意事項
底下這段程式碼最下方body內有四行被遮住的，可以逐一打開其中一個來感受一下，當你滑鼠游標滑入該物件裡面時，滑鼠游標會變成十字移動圖示，但是當你按著滑鼠移動，就會有不同了，在div跟table會顯示為輸入文字的符號，而在button跟img則顯示為移動的十字符號。怎麼回事？這是因為，前兩者是可包容其他物件的區塊物件，用來排版的，而後兩者是不可包容其他物件在其中的功能物件，系統預設按著滑鼠移動叫做拖動，而針對上述兩種類型的物件都預設了滑鼠的圖示，而且無法改（目前我還不會）。
所以如果要拖動物件，而且拖動的對象是個區塊物件，譬如拖動視窗，那會做不出效果來，建議可以放個功能物件在區塊物件上，就像是放個標題列一樣意思，讓使用者在功能物件上按下滑鼠，才觸發移動，並對區塊物件做移動，這樣就行了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mouse Move</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<!-- Script 區段 -->
<script>
$(document).ready(function(e)
{
$(".TheObj").mousemove(function(e)
{
$(".TheObj").text( "mouse moving" );
$(".TheObj").css( "cursor", "move" );
});
})
</script>
<!-- CSS 區段 -->
<style type="text/css">
.TheObj
{
width:600px;
height:400px;
border:solid;
cursor:pointer;
}
</style>
</head>
<!-- Body 區段 -->
<body>
<!-- <div class = "TheObj"></div> -->
<!-- <table class = "TheObj"></table> -->
<!-- <button class = "TheObj"></button> -->
<!-- <img class = "TheObj"></img> -->
</body>
</html>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言