VUE 實現網頁中元素的拖動

2021-10-24 06:39:05 字數 1189 閱讀 6868

實現頁面中的元素拖動。

→ 鏈結位址 ←

div1:我可以被拖動

div2:來拖我呀zhi

div3:我隨便你拖

div4:我可以隨視窗滑動,把我拖到最下面,然後滾動網dao頁看看

www.longbill.cn

引數說明:

drag(obj [,scroll]);

obj:物件的id或物件本身;

scroll(可選):物件是否隨視窗拖動而滑動,預設為否

滑鼠右鍵檢視源**

="movebox"

>

="leftdiv"

>

<

/div>

="linemovediv" draggable=

"true" @mousedown=

"movelinefun"

>

<

/div>

="rightdiv"

>

<

/div>

<

/div>

<

/div>

<

/template>

export

default},

methods:

else

if(styleleft > leftmax)

movelineobj.style.left = styleleft +

'px'

// 賦值拖動的線的左邊距離

leftdiv.style.width = styleleft +

'px'

// 賦值左邊盒子的寬度

rightdiv.style.width = moveboxobjmaxwidth - styleleft - movelineobj.clientwidth +

'px'

// 賦值右邊盒字的寬度

}// 取消計算繫結

function

stopfun

(e)}}}

<

/script>

"less" scoped>

.movebox

.rightdiv

.linemovediv

}<

/style>

vue中 拖動元素邊框 改變元素寬度

先上效果圖 如圖所示,通過拖動來改變表單的寬度。但實際上,這邊並不是表單的邊框,而是乙個單獨的元件。通過監聽滑鼠的down,move以及up事件。我們可以單獨的寫個元件handle.vue。監聽事件並this.emit將值傳給父元件,父元件通過傳過來的值來動態的修改需要改變寬度的元素。如效果圖所示,...

svg中實現元素拖動

svg中實現元素拖動 目錄 html 屬性 初始化 mousedown mousemove mouseup 沒有設定初始值.var originx 0 滑鼠初始位置 var originy 0 var domx 0 dom初始元素 var domy 0 var dom 初始元素 var ismous...

C實現陣列中元素的排序

使用c實現陣列中元素的排序,使得陣列中的元素從小到大排列。只不過在這個過程中出了一點小問題,在c中進行數字交換的時候,必須要使用指標的,不能使用引用。在後面的文章中,我要學習乙個在c中的引用和指標的區別。下面看一下我的 吧。include void swap int a,int b void res...