浅析移动端 div 实现页面任意位置拖拽(TS) 的奥秘

2024-01-20 18:50:00

移动端页面任意位置拖拽：深入浅出的剖析

理解手势事件

移动端交互中，手势事件至关重要。它侦听用户的触摸、双击、长按、拖拽等操作，实现丰富的交互功能。实现拖拽功能，理解手势事件的工作原理是关键。

当用户在屏幕上执行手势操作时，浏览器会触发对应的 touch 事件。该事件包含 touches、target、clientX、clientY 等属性，获取手指坐标、目标元素等信息。通过 addEventListener() 方法监听 touch 事件。

例如，监听 touchstart 事件：

element.addEventListener("touchstart", function(event) {
  // 获取手指坐标
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;

  // 获取目标元素
  var target = event.target;

  // ...
});

元素定位

元素定位决定元素在页面中的位置和布局。拖拽功能需要对元素进行定位。绝对定位和相对定位是两种主要定位方式。

绝对定位脱离元素原本位置，放置在页面任意位置。相对定位相对于原本位置偏移。拖拽功能通常使用绝对定位，脱离原本位置，跟随手指移动。

实现拖拽功能

掌握手势事件和元素定位后，可以实现拖拽功能。

// 获取拖拽元素
var element = document.getElementById("draggable");

// 监听 touchstart 事件
element.addEventListener("touchstart", function(event) {
  // 获取手指坐标
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;

  // 获取元素偏移量
  var offsetX = element.offsetLeft;
  var offsetY = element.offsetTop;

  // 计算手指与元素偏移量
  var deltaX = x - offsetX;
  var deltaY = y - offsetY;

  // 监听 touchmove 事件
  document.addEventListener("touchmove", function(event) {
    // 获取手指坐标
    var x = event.touches[0].clientX;
    var y = event.touches[0].clientY;

    // 计算元素新位置
    var newX = x - deltaX;
    var newY = y - deltaY;

    // 设置元素新位置
    element.style.left = newX + "px";
    element.style.top = newY + "px";
  });

  // 监听 touchend 事件
  document.addEventListener("touchend", function() {
    // 取消 touchmove 事件监听
    document.removeEventListener("touchmove");
  });
});