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>
相关文章
- JavaScript如何获取/计算页面元素的offset?
- JavaScript从父页面获取子页面的值(子页面又如何访问父页面)
- Windows Store App JavaScript 开发:页面加载
- 解决Eclipse报errors running builder ‘javascript validator’ on project
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Poi] Build and Analyze Your JavaScript Bundles with Poi
- JavaScript打开页面后自动随机跳转页面【转】
- 使用Babel和ES7创建JavaScript模块
- [Javascript]3. Improve you speed! Performance Tips
- Javascript 学习 笔记六
- SAP BSP - how to access javascript file via Mime API
- 利用ES6里标准化的JavaScript proxy对象拦截SAP C4C页面的HTML div原生操作
- 用Javascript获取页面元素的位置
- paip.java 以及JavaScript (js) 的关系以及区别
- 如何使用JavaScript开发AR(增强现实)移动应用 (一)
- 一天JavaScript示例-判定web页面的区域