html代码实现手机拖动效果

在移动端，拖动效果是一个很常见的交互效果。我们可以使用HTML代码来实现手机拖动效果，具体步骤如下：

style>
.draggable {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #f1c40f;
      width: 100px;
      height: 100px;
}
    /style>
    script>
    var draggable = document.querySelector('.draggable');
    var isDragging = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;
    draggable.addEventListener('mousedown', dragStart);
    draggable.addEventListener('mouseup', dragEnd);
    draggable.addEventListener('mousemove', drag);
function dragStart(e) {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
  if (e.target === draggable) {
        isDragging = true;
  }
}
function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;
      isDragging = false;
}
function drag(e) {
  if (isDragging) {
        e.preventDefault();
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
        xOffset = currentX;
        yOffset = currentY;
        setTranslate(currentX, currentY, draggable);
  }
}
function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
    /script>
    div class="draggable">
    /div>
    

以上代码中，我们定义了一个class为draggable的元素作为可拖动的对象，并绑定了mousedown、mouseup和mousemove事件。其中dragStart函数用于初始化鼠标坐标和起始坐标，dragEnd函数用于结束拖拽后保存拖拽的位置，drag函数用于实时更新位置并设置拖拽效果。最后，我们在HTML中添加了一个使用了draggable类的div元素，并将其位置设置为绝对定位，实现了拖动效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！