拖拽实现

功能描述

  鼠标左键在指定区域按下可以拖拽当前盒子 
  并且可以拖拽到指定区域
  鼠标松开如果在指定区域内 数据也将同步
  鼠标松开如果不在指定语区域内 当前拖拽的盒子将移动到初始位置

目录结构

  |-- src
  |--  |-- views
  |--  |--  |   |-- dragAnddrop.vue

实现/使用 (opens new window)

  <template>
    <div class='dragAnddrop'>
      <div class="cen-wrapper">
        <div class="sidebar-wrapper">
          <ul ref="treeUl">
            <li
              v-for="(item, index) in sideList"
              :key="index"
              @click="onClick(item)"
              :style="'background:' + (item.show ? 'rgb(69, 124, 226);' : 'rgb(255, 255, 255)')"
              :title="item.name"
            >
              <div>
                {{ item.name }}
              </div>
            </li>
          </ul>
        </div>
        <div class="list-wrapper">
          <ul class="ul-header clearfix">
            <li class="drop"></li>
            <li class="left" v-for="(item, index) in ul_header_list" :key="index">{{ item }}</li>
          </ul>
          <ul class="ul-cen">
            <li v-for="(item, index) in list" :key="index" class="clearfix">
              <div class="drop">
                <p class="dropBtn" @mousedown="onMousedown($event, item)"></p>
              </div>
              <div class="left" v-for="(key, indexs) in Object.keys(item)" :key="indexs">{{ item[key] }}</div>
            </li>
          </ul>
        </div>
        <div class="drop-wrapper clearfix" ref="drops" @mouseup="onMouseup">
          <p class="left">{{ itemUser.name }}</p>
          <p class="left">{{ itemUser.age }}</p>
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    data () {
      return {
        sideList: [
          {
            name: '全部',
            show: false
          },
          {
            name: 'test',
            show: false
          },
          {
            name: 'xyzh',
            show: false
          }
        ],
        list: [
          {
            name: '张三',
            age: 12
          },
          {
            name: '李四',
            age: 18
          },
          {
            name: '王五',
            age: 22
          },
          {
            name: '赵六',
            age: 30
          }
        ],
        ul_header_list: [
          '姓名',
          '年龄'
        ],
        listdata: [
          {
            type: '全部',
            child: [
              {
                name: '全部张三',
                age: 122
              },
              {
                name: '全部李四',
                age: 181
              },
              {
                name: '全部王五',
                age: 222
              },
              {
                name: '全部赵六',
                age: 302
              }
            ]
          },
          {
            type: 'test',
            child: [
              {
                name: 'test张三',
                age: 121
              },
              {
                name: 'test李四',
                age: 118
              },
              {
                name: 'test王五',
                age: 12
              },
              {
                name: 'test赵六',
                age: 330
              }
            ]
          },
          {
            type: 'xyzh',
            child: [
              {
                name: 'xyzh张三',
                age: 132
              },
              {
                name: 'xyzh李四',
                age: 148
              },
              {
                name: 'xyzh王五',
                age: 225
              },
              {
                name: 'xyzh赵六',
                age: 310
              }
            ]
          }
        ],
        itemUser: {
          name: '',
          age: ''
        },
        beginX: 0,
        beginY: 0,
        b_width: 259,
        b_height: 40,
        itemUserIndex: null
      }
    },
    components: {},
    computed: {},
    watch: {},
    beforeCreate () {
    },
    created () {
    },
    methods: {
      onMousedown (e, item) {
        this.$refs.drops.style.transition = 'none'
        this.itemUser = item
        // let odiv = e.target
        this.beginX = e.clientX
        this.beginY = e.clientY
        // let disX = e.clientX - odiv.offsetLeft
        // let disY = e.clientY - odiv.offsetTop
        document.onmousemove = e => {
          // 鼠标按下并移动的事件
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX
          let top = e.clientY
          // 移动当前元素
          this.$refs.drops.style.display = 'flex'
          this.$refs.drops.style.left = left - 55 + 'px'
          this.$refs.drops.style.top = top - 18 + 'px'
          for (let i = 0; i < this.$refs.treeUl.children.length; i++) {
            let offsetLeft = this.$refs.treeUl.children[i].offsetLeft
            let offsetTop = this.$refs.treeUl.children[i].offsetTop
            let itemDom = this.$refs.treeUl.children[i]
            if (offsetLeft <= left && left <= offsetLeft + this.b_width && offsetTop <= top && top <= offsetTop + this.b_height) {
              itemDom.children[0].style.backgroundColor = '#73a7ff'
            } else {
              itemDom.children[0].style.backgroundColor = 'transparent'
            }
          }
        }
        document.onmouseup = (e) => {
          // 如果鼠标在对应的类目下松开  则隐藏那个名片并且处理数据
          for (let i = 0; i < this.$refs.treeUl.children.length; i++) {
            let offsetLeft = this.$refs.treeUl.children[i].offsetLeft
            let offsetTop = this.$refs.treeUl.children[i].offsetTop
            let itemDom = this.$refs.treeUl.children[i]
            if (offsetLeft <= e.clientX && e.clientX <= offsetLeft + this.b_width && offsetTop <= e.clientY && e.clientY <= offsetTop + this.b_height) {
              this.$refs.drops.style.display = 'none'
              this.$refs.treeUl.children[i].children[0].style.backgroundColor = 'transparent'
              this.dealWithData(itemDom.getAttribute('title'))
            }
          }
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      onMouseup () {
        const that = this
        this.$refs.drops.style.transition = 'all .4s'
        // // 这个事件是监听transition触发完成之后触发的事件 addEventListener 多次重复绑定的时候 如果回调函数是一个匿名函数就会被反复执行 因为匿名函数每一个都是一个独立的函数 所以这里使用具名函数
        this.$refs.drops.addEventListener('transitionend', that.dropTransitioncallback, true)
        this.$refs.drops.style.left = this.beginX + 'px'
        this.$refs.drops.style.top = this.beginY - 20 + 'px'
      },
      dropTransitioncallback (that) {
        that.target.style.display = 'none'
      },
      onClick (item) {
        for (let i = 0; i < this.sideList.length; i++) {
          if (item.name === this.sideList[i].name) {
            this.itemUserIndex = i
            this.sideList[i].show = true
            this.getListDataItem(item)
          } else {
            this.sideList[i].show = false
          }
        }
      },
      getListDataItem (item) {
        for (let i = 0; i < this.listdata.length; i++) {
          if (this.listdata[i].type === item.name) {
            this.list = this.listdata[i].child
          }
        }
      },
      dealWithData (typeItem) {
        if (this.listdata[this.itemUserIndex].type === typeItem) return
        this.listdata[this.itemUserIndex].child.forEach((item, index) => {
          // 从原来的地方删除
          if (item.name === this.itemUser.name) {
            this.listdata[this.itemUserIndex].child.splice(index, 1)
          }
        })
        this.listdata.forEach(item => {
          // 将新内容添加
          if (typeItem === item.type) {
            item.child.push(this.itemUser)
          }
        })
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.onClick(this.sideList[0])
      })
    }
  }
  </script>
  <style lang='less' scoped>
  //@import url(); 引入公共css类
  .dragAnddrop {
    overflow: hidden;
    .cen-wrapper {
      width: 60%;
      height: 600px;
      background-color: #fff;
      border-radius: 5px;
      margin: 100px auto 0px;
      display: flex;
      box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
      .sidebar-wrapper {
        width: 300px;
        margin: 50px 0px;
        border-right: 1px solid #e2e2e2;
        ul {
          margin: 20px 20px;
          border-top: 1px solid #e2e2e2;
          li {
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            background-color: #fff;
            transition: all .2s;
            color: rgba(0, 0, 0, 0.87);
            font-size: 14px;
            text-indent: 2rem;
            cursor: pointer;
          }
          li:hover {
            background-color: rgba(237, 239, 243, 0.5);
          }
          li.active {
            background-color: rgb(69, 124, 226);
          }
        }
      }
      .list-wrapper {
        flex: 1;
        margin: 50px 0px;
        .ul-header {
          display: flex;
          height: 40px;
          line-height: 40px;
          .drop {
            flex: 1;
          }
          li {
            flex: 6;
            padding-left: 20px;
            font-size: 14px;
            font-weight: 600;
          }
        }
        .ul-cen {
          height: 40px;
          line-height: 40px;
          li {
            display: flex;
            background-color: #fff;
            transition: all .2s;
            div.drop {
              flex: 1;
              padding-top: 10px;
              .dropBtn {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #ccc;
                cursor: pointer;
                display: none;
              }
            }
            div {
              flex: 6;
              padding-left: 20px;
            }
          }
          li:hover {
            background-color: rgba(237, 239, 243, 0.5);
            div.drop {
              .dropBtn {
                display: block;
              }
            }
          }
        }
      }
    }
    .drop-wrapper {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 120px;
      height: 40px;
      background-color: #fff;
      display: none;
      box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
      display: flex;
      cursor: grabbing;
      p {
        flex: 1;
        line-height: 40px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:first-child {
        font-weight: 600;
        margin-left: 12px;
      }
      p:last-child {
        margin-right: 12px;
      }
    }
  }
  </style>