Vue 實現元件可拖拽

2021-10-05 15:25:29 字數 2622 閱讀 4776

一、template

class

="item"

v-for=

"(item, index) in items"

:key=

"index"

draggable=

"true"

@dragstart=

"handledragstart($event, item)"

@dragover.prevent=

"handledragover($event, item)"

@dragenter=

"handledragenter($event, item)"

@dragend=

"handledragend($event, item)"

>

@toparent=

"getecharts"

style=

"background:#fff"

:chartheight=

"'100%'"

:chartwidth=

"'100%'"

:option=

"item.option"

:id=

"item.name"

>

<

/echarts>

//這個使用的是我之前封裝的那個echarts元件

<

/div>

一、script
import echarts from

'@/components/echarts'

;export

default

,data()

, name:

'one'},

, name:

'two'},

, name:

'three'}]

, dragging:

null}}

,mounted()

;this

.items[1]

.option =

this

.items[2]

.option =},

methods:

,handledragend

(e, item)

,//首先把div變成可以放置的元素,即重寫dragenter/dragover

handledragover

(e),

handledragenter

(e, item)

const newitems =

json

.parse

(json

.stringify

(this

.items));

// console.log(newitems);

var src ='';

var dst ='';

for(

let i =

0; i < newitems.length; i++)if

(json

.stringify

(item)

==json

.stringify

(newitems[i]))

}const str =

json

.parse

(json

.stringify

(newitems.

splice

(src,1)

)); newitems.

splice

(dst,0,

...str)

;/* var namearr = ['success', 'err', 'big', 'small'];

for (let i = 0; i < newitems.length; i++) 我有想過是因為name的原因,但是這樣寫然後直接賦值仍會報錯*/

// this.items = json.parse(json.stringify(newitems));直接這樣會報錯,沒找到好的解決方式,只能用下面的方式

this

.items[0]

.title = newitems[0]

.title;

/*this.items[0].name= newitems[0].name;這個不能寫,否則也會報錯,報的錯和上面一樣*/

this

.items[0]

.option = newitems[0]

.option;

this

.items[1]

.title = newitems[1]

.title;

this

.items[1]

.option = newitems[1]

.option;

this

.items[2]

.title = newitems[2]

.title;

this

.items[2]

.option = newitems[2]

.option;},

getecharts

(echart)};

}}}

vue 實現 可拖拽 寬度的選單

用到的知識點 註冊乙個全域性自定義指令 v focus vue.directive focus 註冊區域性自定義指令 directives 在此我們用的是區域性 onmousedown 滑鼠按下事件 clientx 時滑鼠指標相對於瀏覽器頁面 或客戶區 的水平座標 document.geteleme...

實現 元素 可拖拽

css部分 body drag item html部分 drag item div js部分 var dragitem document.getelementsbyclassname drag item 0 var divx,divy,startmou startmousey,endmou endm...

Vue實現可復用輪播元件

本文用vue簡單的實現了乙個輪播圖的基礎功能,並抽離出來作為乙個公共元件,方便復用 html和js部分 class img box ref img box style for item,index in imglist key index class img item ref img item in...