怎么利用Vue實(shí)現(xiàn)拖拽穿梭框功能

    
      
      
      
    
    
      
      按住拖動(dòng)

二、VUe使用js實(shí)現(xiàn)拖拽穿梭框

#home {
  display: flex;
  justify-content: space-around;
}
.tree-select-content {
  width: 40%;
  height: 300px;
  background: #f9faff;
  border: 1px solid #dee0ec;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
}
.select-content {
  width: max-content;
  height: 20px;
  padding: 1.6%;
  border: 1px solid #d6dbed;
  margin: 2% 1% 0;
  background: #ffffff;
  box-shadow: 0 0 8px 0 rgba(72, 119, 236, 0.1);
  border-radius: 4px;
}
.select-content:hover span {
  color: #4877ec;
}
.select-content:hover {
  cursor: pointer;
  background: #f8faff;
  border: 1px solid #3e75f4;
}
.select-text {
  font-size: 15px;
  color: #2e2f36;
  text-align: center;
  font-weight: 400;
}
.select-text-X {
  font-size: 15px;
  color: #4877ec;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 12px;
  cursor: pointer;
}

效果圖：

三、Vue 拖拽組件 vuedraggable

vuedraggable 是標(biāo)準(zhǔn)的組件式封裝，并且將可拖動(dòng)元素放進(jìn)了 transition-group 上面，過渡動(dòng)畫都比較好。

使用方式：

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

在使用的時(shí)候，可以通過 v-model 來雙向綁定本地 data，如果需要更新或者是觸發(fā)父組件監(jiān)聽的事件，可以在 updated() 中去 emit。

案例：

  
/*被拖拽對象的樣式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*選中樣式*/
.chosen {
  border: solid 1px #3089dc !important;
}

  

四、Awe-dnd指令封裝

vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，這個(gè)庫的特點(diǎn)是封裝了 v-dragging 全局指令，然后通過全局指令去數(shù)據(jù)綁定等。

相比及 vuedraggable 來說， awe-dnd 是沒有雙向綁定（這里沒有雙向綁定并不是很嚴(yán)謹(jǐn)，準(zhǔn)確的來說沒有暴露雙向綁定的方式），因此提供了事件，在拖拽結(jié)束的時(shí)候用來更新列表（不需要手動(dòng)更新列表，其實(shí)內(nèi)部是實(shí)現(xiàn)了雙向綁定的）或者是去觸發(fā)父組件監(jiān)聽的事件。

安裝依賴：

npm install awe-dnd --save
yarn add awe-and

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

案例：

/*被拖拽對象的樣式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*選中樣式*/
.chosen {
  border: solid 1px #3089dc !important;
}

以上就是“怎么利用Vue實(shí)現(xiàn)拖拽穿梭框功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。