vuedraggable 拖拽 应用 不同列表之间的拖拽

vuedraggable 拖拽 应用 不同列表之间的拖拽

npm install vuedraggable


main.js 文件

import VueDraggable from 'vuedraggable';

Vue.use(VueDraggable);

.btns {

  margin-top: 60px;

}

.btns .send {

  margin-right: 30px;

}

.title {

  margin-bottom: 20px;

}

.drag-box {

  padding: 10px 0;

}

.drag-box-item {

  padding: 15px;

  background-color: #eee;

  border-radius: 6px;

  border: 1px #e1e4e8 solid;

}

.item-title {

  color: #666;

  font-size: 12px;

}

.drag-num {

  font-size: 14px;

  color: #333;

  line-height: 41px;

  margin: 10px 5px 10px 0;

}

.leftHeight {

  max-height: 300px;

  overflow: scroll;

}

.leftHeight::-webkit-scrollbar {

  width: 0;

}

.drag-list {

  font-size: 14px;

  color: #333;

  padding: 10px;

  margin: 10px 0;

  background-color: #fff;

  border-radius: 6px;

  cursor: pointer;

  border: 1px #e1e4e8 solid;

  /* -webkit-transition: border 0.3s ease-in;

  transition: border 0.3s ease-in; */

}

.drag-list:hover {

  border: 1px solid #20a0ff;

}

.ghost-style {

  display: block;

  color: transparent;

  border-style: dashed;

}

.model {

  margin: 5% 3% 5% 1%;

  padding: 20px;

  border: 1px solid #888888;

  border-radius: 10px;

  width: 30%;

  float: left;

  text-align: center;

}

.model-box {

  border: 1px solid #e8e8e8;

  border-radius: 10px;

  padding: 5px;

  margin: 0.5% 2% 3% 2%;

  height: 100px;

}

.model-box div.name {

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  word-break: break-all;

}