suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die Verwendung von js zur Implementierung des Div-Dragging-Effekts (kompatibel mit PC und Mobilgeräten)

Beispiel für die Verwendung von js zur Implementierung des Div-Dragging-Effekts (kompatibel mit PC und Mobilgeräten)

怪我咯
怪我咯Original
2017-03-29 15:47:071424Durchsuche

Ich habe vor einiger Zeit unerwartet eine ähnliche Anforderung für das Projekt geschrieben, also bin ich bei der Verwendung des mobilen Terminals auf ein Problem gestoßen. Die drei beim Verschieben verwendeten Ereignisse: Mousedown, Mousemove und Mouseup haben keine Auswirkung auf das mobile Endgerät. Schließlich gibt es auf dem mobilen Endgerät keine Maus. Nachdem ich die Informationen überprüft hatte, stellte ich fest, dass die entsprechenden Ereignisse auf dem mobilen Endgerät sind: Touchstart-, Touchmove- und Touchend-Ereignisse. Beachten Sie außerdem, dass die Koordinaten der aktuellen Maus auf der PC-Seite abgerufen werden: event.clientX und event.clientY, und die Koordinatenpositionen auf der mobilen Seite abgerufen werden: event.touches[0].clientX und event.touches [0]. KundeY.

Lassen Sie uns darüber sprechen, wie Sie diesen Effekt erzielen können. Schauen wir uns zunächst den Effekt an:

PC-Version

Beispiel für die Verwendung von js zur Implementierung des Div-Dragging-Effekts (kompatibel mit PC und Mobilgeräten)

Mobile-Version

Beispiel für die Verwendung von js zur Implementierung des Div-Dragging-Effekts (kompatibel mit PC und Mobilgeräten)

Analysieren wir zunächst einen Ziehvorgang. Am Beispiel des PCs wird zunächst die Maus gedrückt (Mousedown-Ereignis), dann bewegt (Mousemove-Ereignis) und schließlich wird die Maus bewegt freigegeben (Mouseup-Ereignis), müssen wir zuerst eine -Variable festlegen, um aufzuzeichnen, ob die Maus gedrückt wird, und dann müssen wir die aktuellen Koordinaten der Maus aufzeichnen und der aktuelle Versatz von p. Wenn sich die Maus zu bewegen beginnt, werden die aktuellen Koordinaten der Maus minus die Koordinaten beim Drücken der Maus plus der Versatz von p beim Drücken der Maus aufgezeichnet Der Abstand zwischen p und dem übergeordneten Element. Wenn die Maus losgelassen wird, ändern Sie die Markierung, um anzuzeigen, dass die Maus losgelassen wurde.

Schauen wir uns den Code an: 

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;          //鼠标释放
}



Dann fügen wir das Ereignis zu diesem S. hinzu. Schauen wir uns ein anderes an Muss dies auf der mobilen Seite erfolgen? Erstens sind die Ereignisse unterschiedlich. Sie müssen nur touchatart, touchmove und touchend auf der mobilen Seite hinzufügen. Es gibt auch einen anderen Zeitpunkt, zu dem die mobile Seite Koordinaten erhält: event.touches[0 .clientX und event.touches. Dies ist ebenfalls sehr einfach. Wenn es sich um einen PC handelt, verwenden Sie event.touches: 

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



Beachten Sie außerdem, dass die mobile Seite beim Ziehen von p auf dem mobilen Endgerät automatisch einen Gleiteffekt erzeugt, sodass Sie dem auch eine Funktion hinzufügen müssen Seite in Touchmove, um das Standardereignis zu verhindern.

Das Folgende ist der gesamte Code. Sie können mobile Tests unter Chrome simulieren. Klicken Sie hier, um ihn anzuzeigen: 

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


Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von js zur Implementierung des Div-Dragging-Effekts (kompatibel mit PC und Mobilgeräten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So ermitteln Sie mithilfe von JS, ob über ein Mobiltelefon oder ein Pad darauf zugegriffen wirdNächster Artikel：So ermitteln Sie mithilfe von JS, ob über ein Mobiltelefon oder ein Pad darauf zugegriffen wird

In Verbindung stehende Artikel

Mehr sehen