我有一个按钮,我点击它来激活旋转功能。之后,每当我用鼠标悬停在对象上时,对象就会按照我想要的方式旋转。
现在我想更改此设置并通过单击并移动鼠标(同时仍按住鼠标按钮)使对象旋转。当我发布鼠标按钮时,我希望它停止旋转。
我的代码:
HTML:
<div class="model__3d" ref="panel3d">
<a class="button" @click.prevent="rotatemouse()">360</a>
代码js:
rotatemouse() {
document.querySelector('.model__3d').addEventListener('mousedown', () =>{
document.onmousemove = handleMouseMove;
});
//document.onmouseup = function () {
document.querySelector('.model__3d').addEventListener('mouseup', () =>{
document.onmousemove = null;
});
//function handleMouseMove(event) {
document.querySelector('.model__3d').addEventListener('mousemove', (event) =>{
let eventDoc, doc, body;
event = event || window.event;
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
if(maxX == 0){
maxX = event.pageX;
}
if(maxY == 0){
maxY = event.pageY;
}
if(event.pageX > maxX){
console.log("Right");
this.model.rotation.y = this.model.rotation.y + 0.08;
maxX = event.pageX;
}
else {
console.log("Left");
this.model.rotation.y = this.model.rotation.y - 0.08;
maxX = event.pageX;
}
if(event.pageY > maxY){
console.log("Up");
if(this.model.rotation.x < 0.32)
this.model.rotation.x = this.model.rotation.x + 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
else {
console.log("Down");
if(this.model.rotation.x > -0.25)
this.model.rotation.x = this.model.rotation.x - 0.08;
console.log(this.model.rotation.x);
maxY = event.pageY;
}
});
}
谢谢!
答案 0 :(得分:3)
使用组合可以获得所需的行为 @mousemove,@ mousedown,@ teen
new Vue({
el: '#app',
data: {
captureToggle: false,
x: 0,
y: 0
},
methods: {
mo: function(evt) {
if (this.captureToggle) {
this.x = evt.x
this.y = evt.y
}
},
captureOn: function() {
this.captureToggle = true
},
captureOff: function() {
this.captureToggle = false
}
}
})
&#13;
#app {
margin: 50px;
}
.mouseArea {
height: 100px;
width: 300px;
border: solid thin;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<div class="mouseArea" @mousedown="captureOn" @mouseup="captureOff" @mousemove="mo"></div>
<div>x : {{x}}</div>
<div>y : {{y}}</div>
</div>
&#13;