<template>
  <div  :style="{left:`${left}px`,top:`${top}px`}"
    @mousedown.stop>
      <img  :src="url"
        @mousedown.prevent>
  </div>
</template>
<script>
export default {
  data() {
    return {
      left: 300,
      top: 50,
    };
  },
  methods: {
    startDrag(e) {
      let { clientX: startX, clientY: startY } = e;
      this._isMouseDown = true;
      const onMove = e => {
        if (!this._isMouseDown) return;
        e.stopImmediatePropagation();
        const { clientX, clientY } = e;
        const deltaX = clientX - startX;
        const deltaY = clientY - startY;
        // 移動(dòng)距離加上原始距離
        this.left += deltaX;
        this.top += deltaY;
        startX = clientX;
        startY = clientY;
      };
      const onUp = () => {
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
        if (!this._isMouseDown) {
          return false;
        }
      };
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
    },
  },
};
</script>
<style lang="less" scoped>
img {
  cursor: move;
}
.card {
  position: absolute;
  background: #fff;
  .ping {
    position: absolute;
    display: flex;
    .ping-1 {
      width: 180px;
      height: 72px;
      background: #fff;
      margin-top: 8px;
      display: flex;
      margin-right: 8px;
      .name {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 28px;
      }
      .score {
        color: rgba(140, 140, 140, 1);
      }
      .bac-2 {
        background-color: #13ce9f;
      }
      .bac-1 {
        background-color: #597ef7;
      }
      .bac {
        width: 48px;
        height: 48px;
        margin: 12px;
        line-height: 48px;
        text-align: center;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
}
</style>