如何解决如何在 Vue/JavaScript 中锁定对角轴上的移动?
目标是锁定div在对角轴上的移动方向。
相关代码如下:
事件 @mousedown 将布尔值触发为 true,从而激活移动状态。
事件 @mousedown 计算偏移量
事件 @move 根据用户鼠标位置计算 div 的新坐标
使用 e.clientX + (offsetX * Math.tan(angle * rad)) 我可以将运动锁定为负梯度。
我用不同的天使测试过它,但看起来数学是错误的。
我错过了什么?
new Vue({
el: '#app',data: {
x: 0,y: 0,coordinates: {
top: "10px",left: "10px"
},draggable: false,offset: [0,0],},methods: {
down(e) {
this.draggable = true;
this.offset = [
e.target.offsetLeft - e.clientX,e.target.offsetTop - e.clientY
];
},up(e) {
this.draggable = false;
},move(e) {
if (this.draggable) {
this.coordinates.left = (e.clientX + this.offset[0]) + "px";
this.coordinates.top = (e.clientX + (this.offset[0] * Math.tan(45 * Math.PI / 180))) + "px";
}
}
}
})
#app {
position: relative;
width: 100vh;
height: 100vh;
}
.draggable{
cursor: pointer;
position: absolute;
border-radius: 100px;
background-color: lightcoral;
width: 30px;
height: 30px;
padding: 10px;
}
<script src="https://unpkg.com/vue"></script>
<div id="app" @mouseup="up" @mousemove="move">
<div class="draggable" :style="coordinates" @mousedown="down">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。