https://rhinohorns.blogspot.com/2007/11/blog-post_06.html 滑鼠點按拖拉圖表操作模式

這也是一組以小範圍觀看大圖表的 javascript 程式碼，類似 googlemap 拖拉地圖的模式，滑鼠按下後，以拖曳的方式移動欲觀看的區域。

此範例以 <div> 為容器，由於目的是以小範圍賞大圖表，所以 style 中overflow:hidden 的設定是需要的。

<br /><div id="musicMenu" style="height:300;width:300;border:#CCCCCC 1px solid;OVERFLOW:hidden;font-size:9pt" onmousedown="sh_Hold(this)" onmousemove="sh_dragScope(event,this)" onmouseup="sh_unHold()" onmouseout="sh_unHold()"><br /> <div id="musicMenu1" style="cursor:move;height:768;width:1024;background-image:url(http://hahaele.googlepages.com/Creative_Art_by_1024.jpg);"><br /> </div><br /></div><br />

以下則為程式碼部分，

//選定的物件<br />var sh_holdObj = 0;<br /><br />//移動內容<br />function sh_dragScope(e,ob){<br />    if(sh_holdObj){<br />        //處理 y 軸<br />        var sh_lastClientYValue = e.clientY;<br />        if(ob.getAttribute("sh_lastClientYValue") == null){<br />            ob.setAttribute("sh_lastClientYValue",e.clientY);<br />        }else{<br />            sh_lastClientYValue = ob.getAttribute("sh_lastClientYValue");<br />        }<br />        var tempScrollTop = eval(ob.scrollTop);<br />        var jumpElementsY = Math.abs(eval(sh_lastClientYValue - e.clientY));<br />        if(e.clientY < sh_lastClientYValue){<br />            ob.scrollTop = tempScrollTop + jumpElementsY;<br />        }else{<br />            ob.scrollTop = tempScrollTop - jumpElementsY;<br />        }<br />        ob.setAttribute("sh_lastClientYValue",e.clientY);<br />        <br />        //處理 x 軸<br />        var sh_lastClientXValue = e.clientX;<br />        if(ob.getAttribute("sh_lastClientXValue") == null){<br />            ob.setAttribute("sh_lastClientXValue",e.clientX);<br />        }else{<br />            sh_lastClientXValue = ob.getAttribute("sh_lastClientXValue");<br />        }<br />        var tempScrollLeft = eval(ob.scrollLeft);<br />        var jumpElementsX = Math.abs(eval(sh_lastClientXValue - e.clientX));<br />        if(e.clientX < sh_lastClientXValue){<br />            ob.scrollLeft = tempScrollLeft + jumpElementsX;<br />        }else{<br />            ob.scrollLeft = tempScrollLeft - jumpElementsX;<br />        }<br />        ob.setAttribute("sh_lastClientXValue",e.clientX);<br />    }<br />}<br /><br />//釋放選定物件<br />function sh_unHold(){<br />    if(sh_holdObj){<br />        sh_holdObj.removeAttribute("sh_lastClientYValue");<br />        sh_holdObj.removeAttribute("sh_lastClientXValue");<br />    }<br />    sh_holdObj = 0;<br />}<br /> <br />//選定物件 <br />function sh_Hold(ob){<br />    sh_holdObj = ob;<br />}

展示部分，請按住圖片後拖拉。

之後應該還會再翻出來重寫加一些東西 = =。