Implement click and drag to rotate 3D object - vue.js

Question

I have a button, which I click to activate the rotation function. After that, every time I hover over the object with the mouse, the object rotates as I want it to.

Now I want to change this and make the object rotate just by clicking it and moving the mouse (while still holding the mouse button). When I realease the mouse button I want it to stop rotating.

My code:

HTML:

<div class="model__3d" ref="panel3d">   
<a class="button" @click.prevent="rotatemouse()">360</a>

Code 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;
            }
        });
    }

Thanks!

Answer 1

You can have the desired behaviour by using a combination of @mousemove, @mousedown, @mouseup

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
    }
  }
})

#app {
  margin: 50px;
}

.mouseArea {
  height: 100px;
  width: 300px;
  border: solid thin;
}

<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>