国产精品免费嫩草研究院|无遮羞动漫在线观看AV|国产麻豆精品传媒AV国产在线|村在线观看|寂寞情人1正版|韩国床震韩国床震古|精品系列专区久久

  1. 首頁 > 生活 > >

Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式( 二 )

生活百科

效果圖
三、Vue 拖拽組件 vuedraggablevuedraggable 是標(biāo)準(zhǔn)的組件式封裝，并且將可拖動元素放進(jìn)了 transition-group 上面，過渡動畫都比較好 。
使用方式：
yarn add vuedraggableimport vuedraggable from 'vuedraggable';在使用的時候，可以通過 v-model 來雙向綁定本地 data，如果需要更新或者是觸發(fā)父組件監(jiān)聽的事件，可以在 updated() 中去 emit 。
案例：
<template>  <div>    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>    <!--使用draggable組件-->    <draggable      v-model="myArray"      chosenClass="chosen"      forceFallback="true"      group="people"      animation="1000"      @start="onStart"      @end="onEnd"    >      <transition-group>        <div class="item" v-for="element in myArray" :key="element.id">          {{ element.name }}        </div>      </transition-group>    </draggable>    <div class="color-list">      <div        class="color-item"        v-for="color in colors"        v-dragging="{ item: color, list: colors, group: 'color' }"        :key="color.text"      >        {{ color.text }}      </div>    </div>  </div></template>  <style scoped>/*被拖拽對象的樣式*/.item {  padding: 6px;  background-color: #fdfdfd;  border: solid 1px #eee;  margin-bottom: 10px;  cursor: move;}/*選中樣式*/.chosen {  border: solid 1px #3089dc !important;}</style>  <script>//導(dǎo)入draggable組件import draggable from "vuedraggable";export default {  //注冊draggable組件  components: {    draggable,  },  data() {    return {      drag: false,      //定義要被拖拽對象的數(shù)組      myArray: [        { people: "cn", id: 10, name: "www.itxst.com" },        { people: "cn", id: 20, name: "www.baidu.com" },        { people: "cn", id: 30, name: "www.taobao.com" },        { people: "us", id: 40, name: "www.yahoo.com" },      ],      colors: [        {          text: "Aquamarine",        },        {          text: "Hotpink",        },        {          text: "Gold",        },        {          text: "Crimson",        },        {          text: "Blueviolet",        },        {          text: "Lightblue",        },        {          text: "Cornflowerblue",        },        {          text: "Skyblue",        },        {          text: "Burlywood",        },      ],    };  },  methods: {    //開始拖拽事件    onStart() {      this.drag = true;    },    //拖拽結(jié)束事件    onEnd() {      this.drag = false;    },  },};</script>

經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀