html拖拽 门户,实现H5左右拖拽

html,

body {

width: 100%;

}

* {

margin: 0;

padding: 0;

}

div {

width: 100%;

height: 500px;

background-color: aliceblue;

overflow: hidden;

}

ul {

display: flex;

height: 100%;

width: 400%;

position: relative;

left: 0;

}

li {

list-style: none;

width: 100%;

height: 100%;

font-size: 86px;

}

• a
• b
• c
• d

let oBox = document.getElementById("test");

oBox.addEventListener("touchstart", function(ev) {

let startX = e.targetTouches[0].clientX;

let startY = e.targetTouches[0].clientY;

let disX = startX - oBox.offsetLeft;

let disY = startY - oBox.offsetTop;

let dir = ""; //拖拽方向 x代表横向拖拽 y代表纵向

function fnMove(ev) {

let curX = e.targetTouches[0].clientX;

let curY = e.targetTouches[0].clientY;

if (dir == '') {

if (Math.abs(curX - startX) >= 5) {

dir = 'x';

} else if (Math.abs(curY - startY) >= 5) {

dir = 'y';

}

} else {

if (dir == 'x') {

oBox.style.left = e.targetTouches[0].clientX - disX + 'px';

} else if (dir == 'y') {

oBox.style.top = e.targetTouches[0].clientY - disY + 'px';

}

}

}

function fnEnd() {

oBox.removeEventListener('touchmove', fnMove, false);

oBox.removeEventListener('touchend', fnEnd, false);

}

oBox.addEventListener('touchmove', fnMove, false);

oBox.addEventListener('touchend', fnEnd, false);

})

image.png

手风琴效果

html,

body {

width: 100%;

}

* {

margin: 0;

padding: 0;

}

div {

width: 100%;

height: 500px;

background-color: aliceblue;

overflow: hidden;

}

ul {

display: flex;

height: 100%;

width: 400%;

position: relative;

left: 0;

transition: left .1s;

}

li {

list-style: none;

width: 100%;

height: 100%;

font-size: 86px;

}

• a
• b
• c
• d

let oBox = document.getElementById("test");

function touchMoveFunc (index = 0) {

let children_legnth = oBox.children.length;

let child_length = oBox.clientWidth / children_legnth;

function next () {

oBox.style.left

}

let startLeft = 0;

let direction = '';

// let startX =

oBox.addEventListener("touchstart", function(e) {

let startX = e.targetTouches[0].clientX;

let startY = e.targetTouches[0].clientY;

let disX = startX - oBox.offsetLeft;

let disY = startY - oBox.offsetTop;

let dir = ""; //拖拽方向 x代表横向拖拽 y代表纵向

function touchMoveHandler(e) {

let curX = e.targetTouches[0].clientX;

let curY = e.targetTouches[0].clientY;

if (dir == '') {

if (Math.abs(curX - startX) >= 5) {

dir = 'x';

} else if (Math.abs(curY - startY) >= 5) {

dir = 'y';

}

} else {

if (dir == 'x') {

// oBox.style.left = e.targetTouches[0].clientX - disX + 'px';

oBox.style.left = e.targetTouches[0].clientX - disX + 'px';

} else if (dir == 'y') {

oBox.style.top = e.targetTouches[0].clientY - disY + 'px';

}

}

}

function touchEndHandler() {

let startX = e.targetTouches[0].clientX;

let disX = startX - oBox.offsetLeft;

let endLeft = e.targetTouches[0].clientX - disX

if (startLeft > endLeft) {

direction = 'LEFT';

if (index > -(children_legnth) + 1) {

index--

}

} else if (startLeft < endLeft) {

direction = 'RIGHT';

if (index < 0) {

index++

}

} else {

direction = 'NONE';

}

setIndex(index);

oBox.removeEventListener('touchmove', touchMoveHandler, false);

oBox.removeEventListener('touchend', touchEndHandler, false);

}

oBox.addEventListener('touchmove', touchMoveHandler, false);

oBox.addEventListener('touchend', touchEndHandler, false);

})

function setIndex (index) {

oBox.style.left = index * child_length + 'px';

startLeft = index * child_length;

}

function next () {

if (index > -(children_legnth) + 1) {

index--

setIndex(index);

}

}

function prev () {

if (index < 0) {

index++

setIndex(index);

}

}

return {

next,

prev

}

}

const obj = touchMoveFunc()

``