vue实现拖拽效果使用draggable

安装 npm install vuedraggable

html类型

  <div class="itxst">
    <div class="col" v-for="(v, i) in statData" :key="i">
      <div class="col-title">{{ v.title }}</div>
      <draggable
        v-model="v.data"
        group="site"
        animation="100"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        :handle="'.defaultTypeTag'"
        @start="onStart"
        @end="onEnd(statData,v)"
      >
      <!--start开始，end结束-->
        <transition-group :style="style">
          <div
            class="item defaultTypeTag"
            v-for="item in v.data"
            :key="item.id"
            @dragend="startEnter({ father: v, son: item })"
          >
            <div class="item-title">
              <span class="subject">{{ item.subject }}</span>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>

js类型

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //空数组之在的样式，设置了这个样式才能拖入高度必须和父级元素高度相等不然拖不进去
      style: "height:559px;display: block;",
      statData: [],
      tableData: [
      	{ status:'01', subject: '张三', id: 1},
      	{ status:'02', subject: '李四', id: 2},
      	{ status:'04', subject: '王五', id: 3},
      	{ status:'05', subject: '四六', id: 4}
      ],
    };
  },
  created() {
    /**
     * status状态：01-新建、02-进行中、03-已解决、04-测试中、05-已拒绝、06-已关闭
     */
    let arr = JSON.parse(JSON.stringify(this.tableData));
    let brr = [
      { status: "01", data: [], title: "新建" },
      { status: "02", data: [], title: "进行中" },
      { status: "03", data: [], title: "已解决" },
      { status: "04", data: [], title: "测试中" },
      { status: "05", data: [], title: "已拒绝" },
      { status: "06", data: [], title: "已关闭" },
    ];
    brr.forEach((i) => {
      arr.forEach((j) => {
        if (j.status === i.status) {
          i.data.push(j);
        }
      });
    });
    this.statData = brr;
  },
  methods: {
    onStart() {
      this.drag = true;
    },
    onEnd(e,v) {
      this.drag = false;
    },
    startEnter(v) {
    console.log(v)
    },
  },
};
</script>

css

<style>
.col-title {
  padding: 10px;
  border-bottom: solid 1px #eee;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 15px;
}
.item-date {
  color: var(--devui-danger, #f66f6a);
  font-size: 12px;
  /* text-align: right; */
}
/*定义要拖拽元素的样式*/
.ghostClass {
  /* background-color: blue !important; */
}

/* .chosenClass { */
/* opacity: 0;
  transform: translateY(100%);
} */

.dragClass {
  opacity: 1;
  transition: all 0.3s;
}

.itxst {
}

.title {
  padding: 6px 12px;
}

.col {
  width: 253.4px;
  height: 610px;
  flex: 1;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
}
.col::-webkit-scrollbar {
  display: none;
}

.col + .col {
  margin-left: 8.5px;
}
.item {
  margin: 0px 10px 10px 10px;
  height: auto;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item:hover {
  cursor: move;
  background-color: transparent;
  box-shadow: 0 10px 20px #e9e9e9;
}
.item-conductor {
  color: #000;
}
.item-box {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-left: 1px solid #e5d6d6;
  border-bottom: 1px solid #e5d6d6;
  border-right: 1px solid #e5d6d6;
  box-sizing: border-box;
  padding: 4px;
}
.item-title {
  display: inline-block;
  background-color: #fff;
  width: 100%;
  border: 1px solid #e5d6d6;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 7px 7px 0 0;
}
.item-tag {
  float: right;
}
.item-title .subject {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: 165px;
}
.item-box p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 12px;
}
.item-box .degree {
  margin-bottom: 20px;
}
</style>