作者TonyQ (自立而後立人。)
看板Ajax
標題Re: [問題] jQuery 滑動特效
時間Tue May 8 04:46:38 2012
※ 引述《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)
1F:推 s25g5d4:感謝TonyQ大.. 05/08 23:05