Как я могу анимировать движение какого-нибудь объекта за пальцем? С мышкой работает без проблем, а вот с тачем ничего найти не получилось

Question

var x;
var y;
$(document).ready(function() {

  $("body").mousemove(function(e) {
    handleMouseMove(e);
  });
  document.addEventListener('touchmove', function() {
    handleMouseMove(1);
  });


  function handleMouseMove(event) {

    if (event == 1) {
      function showCoordinates() {
        x = Touch.top
        y = Touch.left
        console.log('touch', x, y)
      }
      showCoordinates()
    } else {
      x = event.pageX;
      y = event.pageY;
      console.log('mouse', x, y)
    }

    $("#circle").animate({
      left: x,
      top: y
    }, 15);
  }
})

body{
  width: 100vw;
  height: 100vh;
}

.circle {
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
  position: absolute;
  border-radius: 150px;
  top: 50%;
  left: 50%;
  border: black 4px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circle" style="background:red;" id="circle"></div>

Answer 1

Работает кривовато, но этого будет достаточно для того, чтобы разобраться.

$(document).ready(function() {
  $("body")
    .mouseenter(function({ pageX: left, pageY: top }) {
      console.log('mouseenter', left, top);
      const el = document.createElement('div');
      el.className = 'circle mouse';
      $(el).css({ left, top });
      document.body.appendChild(el);
    })
    .mouseleave(function({ pageX: left, pageY: top }) {
      console.log('mouseleave', left, top);
      const el = document.querySelector('.circle.mouse');
      if(el) {
        document.body.removeChild(el);
      }
    })
    .mousemove(function({ pageX: left, pageY: top }) {
      console.log('mousemove', left, top);
      const el = document.querySelector('.circle.mouse');
      if(el){
        $(el).css({ left, top });
      }
    });
  
  const touches = new Map;

  document.body.addEventListener('touchstart', function(e) {
    e.preventDefault();
    [...e.changedTouches].forEach(({pageX: left, pageY: top, identifier: id}) =>{
      console.log('touchstart',id,left,top);
      const el = document.createElement('div');
      el.className = 'circle';
      $(el).css({left,top});
      document.body.appendChild(el);
      touches.set(id,el);
    });
  });
  document.body.addEventListener('touchmove', function(e) {
    e.preventDefault();
    [...e.changedTouches].forEach(({pageX: left, pageY: top, identifier: id}) =>{
      const el=touches.get(id);
      console.log('touchmove', id, left, top);
      if(el){
        $(el).css({left,top});
      }
    });
  });
  document.body.addEventListener('touchcancel', function(e) {
    e.preventDefault();
    [...e.changedTouches].forEach(({identifier: id}) => {
      console.log('touchcancel',id);
      const el=touches.get(id);
      if(el){
        document.body.removeChild(el);
        touches.delete(id);
      }
     });        
  });
  document.body.addEventListener('touchend', function(e) {
    e.preventDefault();
    [...e.changedTouches].forEach(({identifier: id}) => {
      console.log('touchend',id);
      const el=touches.get(id);
      if(el){
        document.body.removeChild(el);
        touches.delete(id);
      }
     });        
  });

});

* {
  box-sizing: border-box;
}
    
body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.circle {
  height: 50px;
  width: 50px;
  position: absolute;
  border-radius: 50px;
  transform: translate(-50%,-50%);
  border: black 4px solid;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как я могу анимировать движение какого-нибудь объекта за пальцем? С мышкой работает без проблем, а вот с тачем ничего найти не получилось

Ответы (1 шт):