zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript将页面里的图标或者按钮改成可拖动的

JavaScript 页面 按钮 或者 图标 拖动 改成
2023-09-14 09:04:06 时间

代码:

<template>
    <div class="create_event" @click="createEvent()" @touchmove="touchmove($event)">
        <div class="position_circle">
            <i class="iconfont icon-add"></i>
        </div>
    </div>
</template>

<script>
 export default {
  name: 'CreateEventBtn',
  methods: {
   touchmove(event) {
    event.preventDefault(); //阻止默认事件传播
    const _circle = event.targetTouches[0];
    const _create_event = document.getElementsByClassName("create_event")[0];
    const _clientWidth = document.documentElement.clientWidth;
    const _clientHeight = document.documentElement.clientHeight;

    if(_circle.pageX > 28 && _circle.pageX < _clientWidth - 28) {
     _create_event.style.left = -28 + _circle.pageX + "px";
    }
    if(_circle.pageY > 118 && _circle.pageY < _clientHeight - 84) {
     _create_event.style.top = -28 + _circle.pageY + "px";
    }
   },
   createEvent() {
    this.$emit('createEvent');
   },
  }
 }
</script>