vue中實現左右,上下拖拽 全,可複製

2021-10-07 21:38:53 字數 1657 閱讀 9599

//methods方法中

methods:

document.

onmouseup

=function

(evt)

svgresize.setcapture && svgresize.

setcapture()

;return

false;}

})},

}

//mounted()中

mounted()

這裡面要注意的就是,e.clienty/offsettop 這些屬性,都是獲取的哪個物件的值,然後根據自己的頁面實際調整。結合上面溫習的盒子模型,搞清楚層模型中的定位的用法。

發現問題以及反饋:

整個#svgbox的高度未固定住,當上下拖動拖動條時,#svgdown的高度沒變,反而是#svgbox的高度在變化。和我們想要的效果恰恰相反,我們預期效果應該是把#svgbox高度固定,拖動的時候,#svgtop和#svgdown的高度隨之變化。

更正這個bug,我們根據螢幕解析度不同,獲取到當前螢幕的高度,然後把螢幕高度的40%賦值給#svgbox的高度。**如下:

var h  = window.screen.height;

console.

log(h)

;var svgbox = document.

getelementbyid

("svgbox");

svgbox.style.height = h *

0.4+

"px"

;

此時就可以將#svgbox的高度固定住。

禁止左右上下頁面滑動

專案需要,需要在頁面進行canvas繪圖。但是移動端頁面可以隨意滑動,使用者要通過觸筆來繪圖,頁面老是晃動,體驗非常不好。那麼有什麼辦法能讓頁面,或者當前div固定呢?這樣可以達到禁止左右滑動的效果,但是禁止上下就不行了。既然固定,用固定定位不就行了嗎。實踐真的可以,固定定位當前繪圖canvas的d...

實現div左右上下居中,高度隨寬度自適應

一 題目要求滿足 實現 charset utf 8 name viewport content width device width js bintitle head class wrap class inner adiv div body html css有兩種方式實現上下居中,一種是使用flex...

C 中 根據左右上下鍵控制不多個控制項的焦點

如圖 有多個控制項 根據上下左右鍵 控制每個控制項的焦點 public partial class form1 form 定義乙個二位陣列 存放textbox控制項 textbox arr private void form1 load object sender,eventargs e 窗體鍵盤事...