vuedraggable示例_vuedraggable快速入门
value和list
這兩個(gè)都可以給一個(gè)draggable注入數(shù)據(jù)源：
/*value注入數(shù)據(jù)源*/
export default {
data() {
return {
list:[{
name:'aaa',id:1,
},{
name:'bbb',id:2,
}]
};
}
}
/*list注入數(shù)據(jù)源頭*/
export default {
data() {
return {
list:[{
name:'aaa',id:1,
},{
name:'bbb',id:2,
}]
};
}
}
它們的區(qū)別是：value注入的，如果發(fā)生了拖拽，value的數(shù)據(jù)并不會(huì)跟著變化，list注入的，則會(huì)發(fā)生變化。
也就是說value注入的，后續(xù)有無變化都和數(shù)據(jù)體沒關(guān)系，它用于只需要展示拖拽效果的地方；list注入的，數(shù)據(jù)體和當(dāng)前頁(yè)面上的屬性是保持一致的，頁(yè)面上的順序變了，內(nèi)部數(shù)組對(duì)應(yīng)的結(jié)構(gòu)體數(shù)組的順序也會(huì)重新排列，和顯示保持一致。
注意，它們不能同時(shí)出現(xiàn)，只能二選一。
ghost-class和handle
ghost指的在拖拽體原本位置占坑的那個(gè)元素：
ghost-class就是給占坑元素設(shè)置樣式:
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
handle是拖拽的把手，表示拖拽元素指定可拖拽的部分：
正常情況下拖拽元素的整體都是可拖拽的，加了handle之后，只能指定的地方可以拖拽了，其他地方不能進(jìn)行拖拽：
{{ element.name }}
tag和componentData
對(duì)于一些特定的原生組合標(biāo)簽，例如ul,li或者table,tr還有tr,td之類的，可以指定一個(gè)tag，讓draggable替換成指定的標(biāo)簽：
{{ item.id }}{{ item.name }}{{ item.sport }}例如上面的draggable就會(huì)被替換成table。
componentData和tag類似，但是是對(duì)于那種組合組件的，例如在ElementUI中的折疊面邊，el-collapse和el-collapse-item就是這種組合關(guān)系：
與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語(yǔ)言和概念；在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；頁(yè)面反饋：操作后，通過頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。對(duì)于上面那種情況，如果要轉(zhuǎn)成vuedraggable的話，首先要設(shè)置tag，但是那些el-collapse上的數(shù)據(jù)怎么辦呢？就要通過component-data配置了：
{{ lign }}export default {
name: "third-party",
display: "Third party",
order: 10,
components: {
draggable
},
data() {
return {
list: [
{
title: "Consistency",
id: 1,
text: [
"Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;",
"Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."
]
},
{
title: "Feedback",
id: 2,
text: [
"Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;",
"Visual feedback: reflect current state by updating or rearranging elements of the page."
]
}
],
activeNames: [1],
collapseComponentData: {
on: {
change: this.inputChanged
},
props: {
value: this.activeNames
}
}
};
},
methods: {
inputChanged(val) {
this.activeNames = val;
}
}
};
上面代碼中的collapseComponentData就是將原來el-collapse上傳遞數(shù)據(jù)的部分抽離出來了，包括事件(on)，屬性(prop,attr)的設(shè)置。
group和clone
group一般的用法是用來區(qū)分拖拽組的，group名稱相同的拖拽組可以互相拖放：
{{ element.name }} {{ index }}
{{ element.name }} {{ index }}
互相拖放的一般效果如下：
group屬性還有更詳細(xì)的配置，例如:group="{name:'abc',pull:'clone',put:false}"。
put參數(shù)比較簡(jiǎn)單，是用來控制別的地方內(nèi)容是否可以拖拽到自己這邊來。如果設(shè)置為false，那么就表示別的地方的內(nèi)容無法拖拽到自己這邊來。
pull參數(shù)控制的是從當(dāng)前拽走，放在另外一個(gè)地方的行為。默認(rèn)情況下(設(shè)置為true)是你拽到另外一個(gè)地方去，當(dāng)前列表中就會(huì)少一個(gè)，對(duì)方列表多一個(gè)。如果設(shè)置為'clone',那么當(dāng)前列表不會(huì)減少，同時(shí)對(duì)方列表多了一個(gè)。
當(dāng)然你甚至可以配置一個(gè):clone='func'，用來控制放入對(duì)方列表的內(nèi)容，我們看一個(gè)復(fù)雜一點(diǎn)的例子：
{{ element.name }} {{ index }}
{{ element.name }} {{ index }}
export default {
methods: {
clone: function(el) {
return {
name: el.name + " cloned"
};
},
pullFunction() {
return Math.random()*10%2 ? "clone" : true;
},
}
};
上面的代碼中，pull設(shè)置為true還是'clone'是隨機(jī)的(pullFunction)。如果設(shè)置的true，那么就是當(dāng)前少一個(gè)，對(duì)方多一個(gè)；如果是'clone'，同時(shí):clone='func'，那么就會(huì)用調(diào)用你自定義的clone方法，當(dāng)前不少，對(duì)方多一個(gè)。
transition-group和animation
vuedraggable中的動(dòng)畫主要分成兩類，一類是交換過程的動(dòng)畫：
上圖我們可以看到，拖拽元素每經(jīng)過一個(gè)內(nèi)容項(xiàng)，它就會(huì)發(fā)生動(dòng)畫移動(dòng)的效果，這個(gè)主要是通過animation的設(shè)置：
{{ element.name }} {{ index }}
還有一種就是只有交換的雙方才有動(dòng)畫：
這種和上面的不一樣，這種交換過程中沒有動(dòng)畫，但是只是最后真正交換的時(shí)候才有動(dòng)畫，這種需要加個(gè)class就好了：
{{ element.name }} {{ index }}
.flip-list-move {
transition: transform 0.5s;
}
給transition-group添加一個(gè)name屬性ABC，然后增加一個(gè)ABC-move的樣式類就好了
總結(jié)
以上是生活随笔為你收集整理的vuedraggable示例_vuedraggable快速入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： libusb android pc,li
- 下一篇： vue 接口节流_vue输入节流,避免实