<style>
.dingding {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
  .ding_wrap {
    position: relative;
    img {width:60px;pointer-events: none;}
  }
}
</style>
<template>
	<div id="ding_ling" :draggable="true" @dragover.prevent @dragstart="dragStart($event)" @dragend="drop($event)"
      class="dingding" :style="{ right: `${marL}px`, bottom: `${marT}px`}">
      <div class="ding_wrap">
        <div :class="{ 'mess_num': true, 'blink': messCount }">
        	<span>{{ state.messCount }}</span>
        </div>
        <img src="@/assets/images/mess_icon.png" alt="">
      </div>
    </div>
</template>
<script setup>
export default {
 const state= reactive({
      messCount: 0,
      dragX: 0,
      dragY: 0,
      marL: 10,
      marT: 10
    };
  })
    //取消默认行为
   const allowDrop = (e) => {
      e.preventDefault();
    },
    //开始拖动
  const dragStart = (e) => {
      state.dragX = e.x
      state.dragY = e.y
    },
    //放置
  const drop  = (e) => {
      let _x = e.x - state.dragX
      let _y = e.y - state.dragY
      state.marL -= _x
      state.marT -= _y
    },
  ...
  </script>