<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>
vue实现div拖拽自由
于 2024-04-10 09:23:18 首次发布