Home > Developer > Web Develop
Contact the front end has half a time, will not go to search someone else's code, this is my first blog, but also because in search of a lot of examples of left slip deletion, but the results are not very good, although the style above, but most will have no click to delete or uncontrollable events, So simple to sort out a writing, rookie one, just don't spray ~
First of all, a simple idea, in a container container, the definition of two peer label "Display content + Delete button", the button is absolutely positioned on the right side, z-index in the rear, need a fixed width, when the slide shows the content of the section, the button is displayed. With the Add and remove implementations of active, here is the Code section:
First, the HTML section, very simple, a simple content, a delete button
<body>
<ul data-role= "listview" class= "Swipe-delete" >
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
</ul>
</body>
Add a simple CSS style (slightly ugly)
<style>
*{
margin:0;
padding:0;
List-style:none;
}
. swipe-delete{
margin:0 Auto;
}
li{
position:relative;
border-bottom:1px solid red;
}
. behind {
position:relative;
width:100%;
height:60px;
line-height:60px;
Z-index:10;
Background: #ffffff;
Transition:all 0.3s Ease;
-webkit-transition:all 0.30s Ease;
}
. active{
Transform:translate ( -60px,0) translatez (0);
-webkit-transform:translate ( -60px,0) translatez (0);
}
span{
Position:absolute;
right:0;
bottom:0;
top:0;
width:60px;
Color: #ffffff;
Text-align:center;
background:red;
font-size:20px;
line-height:60px;
Z-index:1;
}
</style>
The effect is as follows:
JS Come ~ "Note" Need to introduce zepto.js
<script src= "Zepto.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var obody = $ (document.body), X, Y,startx,starty,moveendx,moveendy;
First step: Get the position coordinates of the touch
Obody.on ("Touchstart", "Li", function (e) {
StartX = E.originalevent.changedtouches[0].pagex;
Starty = E.originalevent.changedtouches[0].pagey;
});
ABS () is the absolute value of the element, and the following is the determination of the sliding direction by judging the touch coordinates.
Obody.on ("Touchmove", "Li", function (e) {
E.preventdefault ();
Moveendx = E.originalevent.changedtouches[0].pagex;
Moveendy = E.originalevent.changedtouches[0].pagey;
X = Moveendx-startx;
Y = Moveendy-starty;
var $touchDoom = $ (this). Children (". behind"); The absolute value of the
//x axis is greater than the absolute values of the Y-axis and x<0 to the left
if (Math.Abs (x) > Math.Abs (Y) && X < 0) {
//to each default sliding element Add default property Data-touch, Data-touch = = ' true ', which means you can swipe if ($touchDoom. attr ("data-touch") = = ' true ') {
$ (this). Siblings (' Li '). Find (". Beh IND "). attr (" Data-touch "," true "). Removeclass (" active ");
$touchDoom. addclass ("active");
$touchDoom. attr ("Data-touch", "false");
}
}
//vice versa ...
Else if (Math.Abs (x) > Math.Abs (Y) && X > 0) {
if ($touchDoom. attr ("Data-t Ouch ") = = ' false ') {
$touchDoom. Removeclass (" active ");
$touchDoom. attr ("Data-touch", "true");
}
}
});
//Click Delete
Obody.on ("click", "Li span", function () {
var parent = $ (this). "Parent (" Li ");
$ (this). Parent ("Li"). Hide (200,function () {
Parent.remove ();
});
});
});
</script>
with complete code for reference only
<! DOCTYPE html>
<TITLE>JQM Swipe delete</title>
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<style>
*{
margin:0;
padding:0;
List-style:none;
}
. swipe-delete{
margin:0 Auto;
}
li{
position:relative;
border-bottom:1px solid red;
}
. behind {
position:relative;
width:100%;
height:60px;
line-height:60px;
Z-index:10;
Background: #ffffff;
Transition:all 0.3s Ease;
-webkit-transition:all 0.30s Ease;
}
. active{
Transform:translate ( -60px,0) translatez (0);
-webkit-transform:translate ( -60px,0) translatez (0);
}
span{
Position:absolute;
right:0;
bottom:0;
top:0;
width:60px;
Color: #ffffff;
Text-align:center;
background:red;
font-size:20px;
line-height:60px;
Z-index:1;
}
</style>
<body>
<ul data-role= "listview" class= "Swipe-delete" >
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li><li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
<li>
<div class= "Behind" data-touch= "true" > left slide Delete </div>
<span>Delete</span>
</li>
</ul>
</body>
<script src= "Zepto.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var obody = $ (document.body), X, Y,startx,starty,moveendx,moveendy;
Obody.on ("Touchstart", "Li", function (e) {
StartX = E.originalevent.changedtouches[0].pagex;
Starty = E.originalevent.changedtouches[0].pagey;
});
Obody.on ("Touchmove", "Li", function (e) {
E.preventdefault ();
Moveendx = E.originalevent.changedtouches[0].pagex;
Moveendy = E.originalevent.changedtouches[0].pagey;
X = Moveendx-startx;
Y = Moveendy-starty;
var $touchDoom = $ (this). Children (". behind");
if (Math.Abs (x) > Math.Abs (Y) && X < 0) {
if ($touchDoom. attr ("data-touch") = = ' true ') {
$ (this). Siblings (' Li '). Find (". Behind"). attr ("Data-touch", "true"). Removeclass ("active");
$touchDoom. addclass ("active");
$touchDoom. attr ("Data-touch", "false");
}
}
else if (Math.Abs (x) > Math.Abs (Y) && X > 0) {
if ($touchDoom. attr ("data-touch") = = ' false ') {
$touchDoom. Removeclass ("active");
$touchDoom. attr ("Data-touch", "true");
}
}
});
Obody.on ("Click", "Li span", function () {
var parent = $ (this). Parent ("Li");
$ (this). Parent ("Li"). Hide (200,function () {
Parent.remove ();
});
});
});
</script>JS Analog Left Slide Delete
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
