jsを使用してdivドラッグ効果を実装する例（PCおよびモバイル対応）-jsチュートリアル-php.cn

jsを使用してdivドラッグ効果を実装する例（PCおよびモバイル対応）

怪我咯

リリース： 2017-03-29 15:47:07

オリジナル

1422 人が閲覧しました

以前に簡単な p-drag エフェクトを作成しましたが、思いがけず昨日のプロジェクトで同様の要件が必要になったので、それを使用しました。しかし、そのうちの 3 つが使用されているときに問題が発生しました。ドラッグするとき。各イベント:mousedown、mousemove、mouseup はモバイル端末には影響しません。結局のところ、モバイル端末にはマウスがありません。情報を確認したところ、モバイル端末で対応するイベントは、touchstart、touchmove、および touchend イベントであることがわかりました。もう 1 つ注意すべき点は、現在のマウスの座標が PC 側で取得される (event.clientX およびevent.clientY)、座標位置がモバイル側で取得される (event.touches[0].clientX およびevent.touches) ということです。 [0]。クライアントY。

この効果を達成する方法について話しましょう。まず効果を見てみましょう:

PC 側

jsを使用してdivドラッグ効果を実装する例（PCおよびモバイル対応）

モバイル側

まず、PC 側を例として、ドラッグプロセスを分析してみましょうまず、マウスが押されたかどうかを記録するために変数を設定する必要があります (マウスが押されたときに)。次にマウスが押されました (mousemove イベント)。マークを付けてから、マウスの現在の座標と p の現在のオフセットを記録する必要があります。マウスが動き始めたら、マウスの現在の座標から移動時の座標を引いた値を使用します。ダウンロード時の p のオフセットは、マウスを放すと、マウスが放されたことを示すマークに変わります。

コードを見てみましょう:

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

ログイン後にコピー

次に、この p にイベントを追加します。まず、モバイル側で行う必要があることを見てみましょう。必要なのは、イベントだけです。モバイル側を追加するには、touchatart、touchmove、touchend を使用するだけで十分です。モバイル端末で座標を取得する別の方法もあります。event.touches[0].clientX とevent.touches[0].clientY です。これも非常に簡単です。 . 判断を追加するだけです。PC の場合は、event.touches を使用します。

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

ログイン後にコピー

もう 1 つの注意点は、モバイルで p をドラッグすると、スライド効果があるため、touchmove に追加する必要があるのは、デフォルトのイベントをブロックする機能をページに追加することです。

以下は、Chrome でモバイルテストをシミュレートできるコード全体です。ここをクリックして表示します:

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

ログイン後にコピー

以上がjsを使用してdivドラッグ効果を実装する例（PCおよびモバイル対応）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。