怎么利用Vue实现拖拽穿梭框功能

    
      
      
      
    
    
      
      按住拖动

二、VUe使用js实现拖拽穿梭框

#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 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。

使用方式：

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 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，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。

安装依赖：

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实现拖拽穿梭框功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。