Maison >interface Web >js tutoriel >Exemple d'utilisation de js pour implémenter l'effet de glissement div (compatible avec PC et mobile)

Exemple d'utilisation de js pour implémenter l'effet de glissement div (compatible avec PC et mobile)

怪我咯original: 2017-03-29 15:47:071424parcourir

J'ai écrit un simple effet p drag il y a quelque temps. De façon inattendue, j'avais besoin d'une exigence similaire pour le projet hier, alors je viens de l'utiliser. Cependant, j'ai rencontré un problème lors de l'utilisation du terminal mobile. Les trois événements utilisés lors du déplacement : mousedown, mousemove et mouseup n'ont aucun effet sur le terminal mobile. Après tout, il n'y a pas de souris sur le terminal mobile. Après avoir vérifié les informations, j'ai constaté que les événements correspondants sur le terminal mobile sont : les événements touchstart, touchmove et touchend. Autre chose à noter, les coordonnées de la souris actuelle sont obtenues côté PC : event.clientX et event.clientY, et les positions des coordonnées sont obtenues côté mobile : event.touches[0].clientX et event.touches [0]. clientY.

Parlons de la façon d'obtenir cet effet. Jetons d'abord un coup d'œil à l'effet :

Version PC

Exemple d'utilisation de js pour implémenter l'effet de glissement div (compatible avec PC et mobile)

Version mobile

Version mobileParlons de la façon d'obtenir cet effet. 🎜>

Analysons d'abord un processus de glissement. En prenant le PC comme exemple, la souris est d'abord enfoncée (événement mousedown), puis déplacée (événement mousemove), et enfin la souris est enfoncée. libéré (événement mouseup), nous devons d'abord définir une

variable

var flag = false;    //是否按下鼠标的标记
var cur = {       //记录鼠标按下时的坐标
  x:0,
  y:0
}
var nx,ny,dx,dy,x,y ;
//鼠标按下时的函数
function down(){
  flag = true;       //确认鼠标按下
  cur.x = event.clientX;  //记录当前鼠标的x坐标
  cur.y = event.clientY;  //记录当前鼠标的y坐标
  dx = p2.offsetLeft;  //记录p当时的左偏移量
  dy = p2.offsetTop;   //记录p的上偏移量
}
//鼠标移动时的函数
function move(){
  if(flag){            //如果是鼠标按下则继续执行
    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
    x = dx+nx;          //p在x轴的偏移量加上鼠标在x轴移动的距离
    y = dy+ny;          //p在y轴的偏移量加上鼠标在y轴移动的距离
    p2.style.left = x+"px";
    p2.style.top = y +"px";
  }
}
//鼠标释放时候的函数
function end(){
  flag = false;          //鼠标释放
}

pour enregistrer si la souris est enfoncée. Lorsque la souris est enfoncée, nous faisons une marque, puis nous devons enregistrer les coordonnées actuelles de la souris. et le décalage actuel de p. Lorsque la souris commence à bouger, enregistrez les coordonnées actuelles de la souris moins les coordonnées lorsque la souris est enfoncée plus le décalage de p lorsque la souris est enfoncée. la distance entre p et l'élément parent. Lorsque la souris est relâchée, modifiez la marque pour indiquer que la souris a été relâchée.

Jetons un œil au code :

var touch ;
if(event.touches){
  touch = event.touches[0];
}else {
  touch = event;
}

Ensuite, ajoutons l'événement à cette p. Regardons un autre Quoi. doit être fait du côté mobile ? Tout d'abord, les événements sont différents. Il suffit d'ajouter touchatart, touchmove et touchend du côté mobile. Il y a aussi un moment différent où le côté mobile obtient les coordonnées : event.touches. [0].clientX et event.touches. [0].clientY, c'est aussi très simple, ajoutez simplement du jugement S'il s'agit d'un PC, utilisez event. S'il s'agit d'un terminal mobile, utilisez event.touches :
.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>适配移动端的拖动效果</title>
  <style>
    #p1{
      height: 1000px;
    }
    #p2{
      position: absolute;
      top:0;
      left:0;
      width: 100px;
      height: 100px;
      background: #bbbbbb;
    }
  </style>
</head>
<body>
<p id="p1">
  <p id="p2"></p>
</p>
<script>
  var flag = false;
  var cur = {
    x:0,
    y:0
  }
  var nx,ny,dx,dy,x,y ;
  function down(){
    flag = true;
    var touch ;
    if(event.touches){
      touch = event.touches[0];
    }else {
      touch = event;
    }
    cur.x = touch.clientX;
    cur.y = touch.clientY;
    dx = p2.offsetLeft;
    dy = p2.offsetTop;
  }
  function move(){
    if(flag){
      var touch ;
      if(event.touches){
        touch = event.touches[0];
      }else {
        touch = event;
      }
      nx = touch.clientX - cur.x;
      ny = touch.clientY - cur.y;
      x = dx+nx;
      y = dy+ny;
      p2.style.left = x+"px";
      p2.style.top = y +"px";
      //阻止页面的滑动默认事件
      document.addEventListener("touchmove",function(){
        event.preventDefault();
      },false);
    }
  }
  //鼠标释放时候的函数
  function end(){
    flag = false;
  }
  var p2 = document.getElementById("p2");
  p2.addEventListener("mousedown",function(){
    down();
  },false);
  p2.addEventListener("touchstart",function(){
    down();
  },false)
  p2.addEventListener("mousemove",function(){
    move();
  },false);
  p2.addEventListener("touchmove",function(){
    move();
  },false)
  document.body.addEventListener("mouseup",function(){
    end();
  },false);
  p2.addEventListener("touchend",function(){
    end();
  },false);
</script>
</body>
</html>

Une autre chose à noter est que lorsque vous faites glisser p sur le terminal mobile, la page mobile produira automatiquement un effet de glissement, vous devez donc également ajouter une fonction à la page en touchmove pour empêcher l'événement par défaut.

Ce qui suit est l'intégralité du code, vous pouvez simuler des tests mobiles sous Chrome, cliquez ici pour voir :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JS pour déterminer s'il est accessible par téléphone mobile ou par tabletteArticle suivant：Comment utiliser JS pour déterminer s'il est accessible par téléphone mobile ou par tablette

Articles Liés

Voir plus