一、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>
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...