推 s25g5d4:感謝TonyQ大.. 05/08 23:05
※ 引述《s25g5d4 (死城盜賊)》之銘言：
: 我做了一個網頁 其div#container的長度很長
: 通常會超過一般使用者的瀏覽器視窗大小
: 所以我想做成像手機一樣 按住滑鼠就能拖曳往左右拉
: 於是我想到用jQuery UI的draggable去做
: 但是做出來卻可以拉拉拉..一直拉下去 而不會碰到邊邊就停下來
不用說，當然使先參考文件
http://jqueryui.com/demos/draggable
單純限制不能拉過邊邊的部份，就以 dragable 來看：
drag event 中去停掉預設的事件或者對 x-y 軸作處理
ex. left < 0 就改成 0 之類的
: 像這個範例http://dl.dropbox.com/u/55351012/test1.html
: 其實我最希望的效果是拉過頭會自己彈回來
: 不過完全搞不懂怎做...
如果想要作到這個效果其實很單純，他有 stop event ，
你也能從 start 時紀錄 window 的寬高，
等他 stop 後手動去算 scrollLeft 是不是小於0 或大於寬 ，
scrollTop 是不是小於零或大於高，
是的話就 animate({scrollLeft:newLeft,scrollTop:netTop}) 過去就好了，
原理上應該是相當單純的才是。
不過這樣作要小心，使用者如果想圈選文字是不是還能正常圈選，
一般而言，盡量不要改變使用者對既有行為的直覺為佳。
--
另一方面，如果是我作，我會直接用 mousedown 跟 mouseup 來作，
不過就是 mousedown / mouseup 搭配 scrollLeft 的操作而已。
用到 draggable 有點過頭了。
--
Life's a struggle but beautiful.
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.25.48.108
※ 編輯: TonyQ 來自: 114.25.48.108 (05/08 04:49)
※ 編輯: TonyQ 來自: 114.25.48.108 (05/08 04:49)