JS实现移动端触屏拖拽功能

触摸世界，JS掌控：移动端触屏拖拽功能的轻松实现

在移动设备的普及之下，移动端触屏拖拽功能成为了许多应用的基本交互方式之一。今天，我们将通过简单的JS代码实现这一功能，带您领略技术之美。

让我们看看HTML结构：

```html

```

接着是CSS样式：

```css

{

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

div1 {

width: 50px;

height: 50px;

background: cyan;

position: absolute;

}

```

现在，让我们聚焦于JS的实现。这段代码不仅实现了触屏拖拽，还限制了拖拽的范围，确保元素不会拖出视口。

```javascript

var div1 = document.querySelector('div1');

// 限制最大宽高，不让滑块出去

var maxW = document.body.clientWidth - div1.offsetWidth;

var maxH = document.body.clientHeight - div1.offsetHeight;

// 手指触摸开始，记录div的初始位置

div1.addEventListener('touchstart', function(e) {

var ev = e || window.event;

var touch = ev.targetTouches[0];

var oL = touch.clientX - div1.offsetLeft;

var oT = touch.clientY - div1.offsetTop;

document.addEventListener("touchmove", dragElement, false);

});

// 触摸中，位置记录

function dragElement(e) {

var ev = e || window.event;

var touch = ev.targetTouches[0];

var oLeft = touch.clientX - oL;

var oTop = touch.clientY - oT;

// 限制拖拽范围

if(oLeft < 0) {

oLeft = 0;

} else if(oLeft > maxW) {

oLeft = maxW;

}

if(oTop < 0) {

oTop = 0;

} else if(oTop > maxH) {

oTop = maxH;

}

div1.style.left = oLeft + 'px';

div1.style.top = oTop + 'px'; // 注意这里原本缺少的 'top' 属性设置。感谢大家的指正！