原來這樣可以實現滑鼠拖拽

2022-04-02 12:46:12 字數 590 閱讀 9307

引言: 上次弄了放大鏡效果(放大鏡原來是這麼回事),當時用到了clientx clienty 後來查詢了一下這兩個屬性,發現居原來還可以用來做簡單的拖拽。實現原理與放大鏡那裡一樣,改變left 與top 的數值讓 div 移動。

1

#box

9#box2

1819

2021

2223

2425

2627

68

補充 上面的  提到的:return false;// 瀏覽器全選時影響拖拽,此時用這個可以阻止以及 :box.setcapture && box.setcapture(); // 阻止滑鼠全選影響拖拽的方法,此為了相容ie8,別的瀏覽器不支援 setcapture 屬性,所以要在這裡做瀏覽器判斷,先判斷是否支援此屬性

如果不加,這個就會導致下面這種情況,當全選時,拖動移動框會影響周邊元素的影子一起動,加了上面的**宣告可以阻止瀏覽器的行為,阻止下面情況發生:

原來可以這樣

葉子有沒有腳?顯然沒有.可是卻可以飛遍天涯海角,真好.樹兒有沒有眼睛?顯然沒有.可是卻可以仰望天空,真好.岩石有沒有呼吸?顯然沒有.可是卻可以感受陽光,真好 草原有沒有笑臉?顯然沒有.可是卻充滿了收穫的喜悅,真好 人們有沒有魔幻的法力?顯然沒有.可是卻有美妙的夢境,真好.烏雲有沒有眼淚?顯然沒有.可...

Vuex原來可以這樣上手

在mvc模式大行其道的今天,後端通過各種mvc框架實現檢視與資料模型的隔離,而前端這方面也發展迅速。vue實現了dom與viewmodel雙向繫結,使其檢視的更新影響模型,模型的更新影響檢視,你會不會覺得這就是mvc庫呢,實則不然,因為他還差乙個重要的c 也就是控制器 以下是鄙人對mvc的個人理解,...

Vuex原來可以這樣上手

在mvc模式大行其道的今天,後端通過各種mvc框架實現檢視與資料模型的隔離,而前端這方面也發展迅速。vue實現了dom與viewmodel雙向繫結,使其檢視的更新影響模型,模型的更新影響檢視,你會不會覺得這就是mvc庫呢,實則不然,因為他還差乙個重要的c 也就是控制器 以下是鄙人對mvc的個人理解,...