<div class="container">
<div v-my-directive class="drag-box">
<img src="@/assets/btn_tuimen.png">
</div>
</div>
</template>
<script lang="ts" setup>
const vMyDirective = {
beforeMount: (el: HTMLDivElement) => {
el.ontouchstart = (e: TouchEvent) => {
const disX: number = e.targetTouches[0].pageX - el.offsetLeft;
const disY: number = e.targetTouches[0].pageY - el.offsetTop;
document.ontouchmove = (e: TouchEvent) => {
let left: number = e.targetTouches[0].pageX - disX;
let top: number = e.targetTouches[0].pageY - disY;
if(top < 50) top = 50
if(left <0) left = 0
const containerDom: HTMLDivElement = document.querySelector(".container") as HTMLDivElement;
if(top > containerDom.offsetHeight - 50) top = containerDom.offsetHeight - 50
if(left > containerDom.offsetWidth - 64) left = containerDom.offsetWidth - 64
el.style.left = left + "px";
el.style.top = top + "px";
};
document.ontouchend = () => {
document.ontouchmove = null;
document.ontouchend = null;
};
}
}
}