How to use javascript to realize left sliding deletion

This article mainly explains "how to use javascript to achieve left-slide deletion", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to use javascript to achieve left-slide deletion" bar!

Javascript: 1, calculate the font size of the root node HTML; 2, initialize the font size of the root node HTML; 3, set the side slide display delete button; 4, through "event.preventDefault ()." Just delete the left slide.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How does javascript achieve left-slipping deletion?

Pure js left slide delete function

The code is as follows:

The js side slide shows the delete button * {margin:0;padding:0;} body {font-size:.14rem;} li {list-style:none;} I {font-style:normal;} a {color:#393939;text-decoration:none;} .list {overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid # ddd;}. List li {overflow:hidden;width:120%;border-bottom:1px solid # ddd;}. List li a {display:block;height:.88rem Line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}. List li i {float:right;width:15%;text-align:center;background:#E2421B;color:#fff;} .swipeleft {transform:translateX (- 15%);-webkit-transform:translateX (- 15%);} / / calculate the font size of the root node HTML function resizeRoot () {var deviceWidth = document.documentElement.clientWidth, num = 750, num1 = num / 100 If (deviceWidth > num) {deviceWidth = num;} document.documentElement.style.fontSize = deviceWidth / num1 + "px";} / / the font size of the root node HTML initializes resizeRoot (); _ window.onresize = function () {resizeRoot ();} Side slip display delete button 1 delete side slip display delete button 2 delete side slip display delete button 3 delete / / side slip show delete button var expansion = null; / / whether there is an expanded listvar container = document.querySelectorAll ('.list li a'); for (var I = 0; I

< container.length; i++){ var x, y, X, Y, swipeX, swipeY; container[i].addEventListener('touchstart', function(event) { x = event.changedTouches[0].pageX; y = event.changedTouches[0].pageY; swipeX = true; swipeY = true ; if(expansion){ //判断是否展开，如果展开则收起 expansion.className = ""; } }); container[i].addEventListener('touchmove', function(event){ X = event.changedTouches[0].pageX; Y = event.changedTouches[0].pageY; // 左右滑动 if(swipeX && Math.abs(X - x) - Math.abs(Y - y) >

0) {/ / prevent event bubbling event.stopPropagation (); if (X-x > 10) {/ / right slide event.preventDefault (); this.className = ""; / / right slide away} if (x-X > 10) {/ / left slide event.preventDefault () This.className = "swipeleft"; / / expand left slide expansion = this;} swipeY = false;} / / slide if up and down (swipeY & & Math.abs (X-x)-Math.abs (Y-y) < 0) {swipeX = false;}}) } Thank you for your reading, the above is the content of "how to use javascript to achieve left-slip deletion". After the study of this article, I believe you have a deeper understanding of how to use javascript to achieve left-slip deletion, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!