vue拖拽组件开发

vue拖拽组件开发

---

创建临时vue项目

先查看node和npm版本，怎么安装就不多多bb了

再安装vue-cli

npm install vue-cli -g      //全局安装 vue-cli

检测是否安装成功

vue list

创建项目

vue init webpack  "项目名称"

• 下面懒得介绍了，直接用小姐姐一张图，通道=>程序员是粉色的

开始写拖拽组件

组件就暂且命名为 JuDrag吧。然后再在index.vue里面引入，代码如下：

<template>
  <div class="a">
    <ju-drag :post_data="post_data">
      <div
        v-for="item in post_data"
        :key="item.id"
        :id="item.id"
        class="b"
      >{{item.name}}</div>
    </ju-drag>
    <div class="b"></div>
  </div>
</template>

<script>
import JuDrag from "@/components/JuDrag";
export default {
  name: "index",
  components: {
    JuDrag
  },
  data() {
    return {
      post_data: [
        {
          id: 11111,
          name: "第一个块"
        },
        {
          id: 22222,
          name: "第二个块"
        },
        {
          id: 33333,
          name: "第三个块"
        },
        {
          id: 44444,
          name: "第四个块"
        },
        {
          id: 555555,
          name: "第五个块"
        },
        {
          id: 66666,
          name: "第六个块"
        },
        {
          id: 77777,
          name: "第七个块"
        }
      ]
    };
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.a {
  width: 200px;
  padding: 10px;
  border: 1px #eee solid;
}

.b {
  margin-bottom: 10px;
  height: 50px;
  background: red;
}
</style>

然后写JuDrag.vue代码

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      pitch_div_id: "", //正在移动的id
    };
  },
  props: {
    post_data: Array
  },
  mounted() {
    this.post_data.forEach(item => {
      let element = document.getElementById(item.id);
      element.setAttribute("draggable", "true");
      element.style =
        "transition:all 0.5s cubic-bezier(0,0,1,1) 0s;";
      this.addHandler(element);
    });
  },
  methods: {
    dragstart(event) {
      event.dataTransfer.setData("Text", event.target.id);
      event.target.style.opacity = "0.4";
      this.pitch_div_id = event.target.id;
    },
    drag(event) {},
    dragend(event) {
      event.target.style.opacity = "1";
    },
    dragenter(event) {
      if (event.target.id == "") return;
      if (event.target.id == this.pitch_div_id) return;
      let x = "",
        y = "";
      this.post_data.forEach((item, index) => {
        if (item.id == this.pitch_div_id) x = index;
        if (item.id == event.target.id) y = index;
      });
      this.post_data = this.moveArray(this.post_data, x, y);
      this.animation(x, y, this.pitch_div_id, event.target.id);
    },
    dragover(event) {
      //更改图标
      this.preventDefault(event);
    },
    dragleave(event) {},
    drop(event) {
      //关闭火狐默认打开事件
      this.preventDefault(event);
      this.stopPropagation(event);
    },
    animation(x, y, x_id, y_id) {
      let x_element = document.getElementById(x_id);
      let y_element = document.getElementById(y_id);
    },
    moveArray(array, x, y) {
      if (x < y) {
        array.splice(y + 1, 0, array[x]);
        array.splice(x, 1);
      } else {
        array.splice(y, 0, array[x]);
        array.splice(x + 1, 1);
      }
      return array;
    },

    addHandler(element) {
      let arr = [
        "dragstart",
        "drag",
        "dragend",
        "dragenter",
        "dragover",
        "dragleave",
        "drop"
      ];
      arr.forEach(item => {
        let getEvent = event => {
          let event_new = this.getEvent(event);
          this[item](event_new);
        };
        if (element.addEventListener) {
          element.addEventListener(item, getEvent, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + item, getEvent);
        } else {
          element["on" + item] = getEvent;
        }
      });
    },
    removeHandler(element, type, handler) {
      if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
      } else {
        element["on" + type] = null;
      }
    },
    getEvent(event) {
      return event ? event : window.event;
    },
    getTarget(event) {
      return event.target || event.srcElement;
    },
    //取消事件默认动作
    preventDefault(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    },
    stopPropagation(event) {
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubbles = true;
      }
    },
    //获取与目标节点事件相关的节点信息
    getRelatedTarget(event) {
      if (event.relatedTarger) {
        return event.relatedTarget;
      } else if (event.toElement) {
        return event.toElement;
      } else if (event.fromElement) {
        return event.fromElement;
      } else {
        return null;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>