touchmove 长按_移动端 javascript 实现长按拖动图片，改变图片位置

实现长按拖动图片，可以通过以下步骤：

1. 给图片绑定 touchstart、touchmove、touchend 事件。
2. 在 touchstart 事件中，记录当前手指位置和图片位置。
3. 在 touchmove 事件中，计算手指位置的偏移量，并根据偏移量改变图片位置。
4. 在 touchend 事件中，清除定时器并重置状态。

下面是一个示例代码：

// 获取图片元素
var img = document.getElementById('image');
// 初始化状态变量
var startX = 0, startY = 0, moveX = 0, moveY = 0, timer = null;

// 绑定 touchstart 事件
img.addEventListener('touchstart', function(e) {
  // 阻止默认事件
  e.preventDefault();
  // 记录手指位置和图片位置
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
  moveX = img.offsetLeft;
  moveY = img.offsetTop;
  // 设置定时器，用于长按判断
  timer = setTimeout(function() {
    // 长按触发，修改图片样式
    img.style.border = '2px dashed red';
    img.style.opacity = '0.5';
  }, 500);
});

// 绑定 touchmove 事件
img.addEventListener('touchmove', function(e) {
  // 阻止默认事件
  e.preventDefault();
  // 计算手指偏移量，并改变图片位置
  var offsetX = e.touches[0].clientX - startX;
  var offsetY = e.touches[0].clientY - startY;
  img.style.left = moveX + offsetX + 'px';
  img.style.top = moveY + offsetY + 'px';
});

// 绑定 touchend 事件
img.addEventListener('touchend', function(e) {
  // 阻止默认事件
  e.preventDefault();
  // 清除定时器
  clearTimeout(timer);
  // 重置图片样式
  img.style.border = 'none';
  img.style.opacity = '1';
});

这段代码实现了在移动端上长按图片后可以拖动图片，并且在长按后会修改图片样式。注意，这段代码仅作为示例，实际应用中还需要根据具体需求进行调整和优化。