前幾天用js實現了鼠標拖動div的功能，但是用起來不是那麼便捷，於是想著把這個功能做成一個組件，使用的時候直接引入，不用再寫那麼多冗餘代碼了。
想要實現的效果
- 只要把div註冊到該組件，目標div就都能隨意拖動
- 可設置div能夠拖動的範圍
實現分析
js組件的基本寫法和div拖動的邏輯就不再贅述了，前面文章已經說過了，可點擊下面鏈接查看
在這裡主要分析下怎麼限制拖動的範圍,先看下圖：
限制範圍
拖動時有四種邊緣情況，即圖中的1、2、3、4，我們一一來看
- 當div拖動到位置1時，我你們再往左拖動，都應該失效，即拖動div的left 始終等於外層div的left值
- 當div拖動到位置2時，我們再往上拖動，都應該無效，即拖動div的top始終等於外層div的top值
- 當div拖動到位置3時，我們再往右拖動，都應該無效，即拖動div的left始終等於外層div的left加上外層div的寬度，然後再減去拖動div的寬度
- 當div拖動到位置4時，我們再往下拖動，都應該無效，即拖動div的top始終等於外層div的top加上外層div的高度然後減去拖動div的高度
理論知識弄明白了，我們先看下實現的效果吧
有範圍的拖動
下面貼上實現的代碼
html中引入組件，並初始化
html中引入組件
具體的js組件實現
js拖動組件1
js拖動組件2
分享到:
閱讀更多 景柯學 的文章
