JS Imitation qq to the contact to the left, slide out of the Delete button operation _javascript skills

This article for everyone to share the implementation of similar QQ to the contact person's operation: Slide left, slide out of the delete button. Slide more than half when the release is automatically slippery to the end, less than half of the release then return to the original.

Pure JS Implementation
the use of H5 touchmove and other events, and JS dynamic change CSS3 Translate properties to achieve the animation effect:

<! DOCTYPE html>  

Made into Zepto plug-ins
in the actual project, we may have many places to use this function. Now we will make this function Zepto plug-in, convenient to use later.

This plugin, we only implement this function, and then pass in the parameters (delete the button style name), so that the program in JS to calculate the need to slide the distance, easy to reuse.

Zepto.touchWipe.js

/** * Zepto plugin: Sliding left to delete dynamic * Use method: $ ('. Itemwipe '). Touchwipe ({itemdelete: '. Item-delete '});
* Parameters: Itemdelete Delete button style name * *;
  (function ($) {$.fn.touchwipe = function (option) {var defaults = {itemdelete: '. Item-delete ',//delete element}; var opts = $.extend ({}, defaults, option);

  configuration option var Delwidth = $ (opts.itemdelete). width (); var Initx; Touch position var MoveX; The position of the slider var X = 0; Move distance var objx = 0;
   Target object Location $ (this). On (' Touchstart ', function (event) {Event.preventdefault ();
   var obj = this;
   INITX = Event.targettouches[0].pagex;
   OBJX = (Obj.style.WebkitTransform.replace (/translatex\ (/g, ""). Replace (/px\)/g, "")) * 1;
     if (OBJX = = 0) {$ (this). On (' Touchmove ', function (event) {Event.preventdefault ();
     var obj = this;
     MoveX = Event.targettouches[0].pagex;
     X = MOVEX-INITX;
     if (X >= 0) {obj.style.WebkitTransform = "Translatex (" + 0 + "px)";
      else if (x < 0) {var L = math.abs (x); Obj.style.WebkitTransform = "Translatex (" +-L + "px");
       if (L > Delwidth) {l = delwidth;
      Obj.style.WebkitTransform = "Translatex (" +-L + "px");
   }
     }
    });
     else if (OBJX < 0) {$ (this). On (' Touchmove ', function (event) {Event.preventdefault ();
     var obj = this;
     MoveX = Event.targettouches[0].pagex;
     X = MOVEX-INITX;
      if (x >= 0) {var r =-delwidth + math.abs (x);
      Obj.style.WebkitTransform = "Translatex (" + R + "px");
       if (R > 0) {r = 0;
      Obj.style.WebkitTransform = "Translatex (" + R + "px");
     } else {//left slide Obj.style.WebkitTransform = "Translatex (" +-delwidth + px);
   }
    });
   }) $ (this). On (' Touchend ', function (event) {Event.preventdefault ();
   var obj = this;
   OBJX = (Obj.style.WebkitTransform.replace (/translatex\ (/g, ""). Replace (/px\)/g, "")) * 1;
    if (Objx >-delwidth/2) {obj.style.transition = "all 0.2s"; Obj.style.WebkitTransform = "Translatex ("+ 0 +" px) ";
    obj.style.transition = "All 0";
   OBJX = 0;
    else {obj.style.transition = "all 0.2s";
    Obj.style.WebkitTransform = "Translatex (" +-delwidth + "px");
    obj.style.transition = "All 0";
   OBJX =-delwidth;
 })//Chain return returns this;

};

 }) (Zepto);

Touchwipe.html

<! DOCTYPE html>  

Effect:

Application effect in the actual project:

Eliminate bugs
To the above step, basically achieve the function we need. But there are a few questions :

1. The Delete button on the right failed, because span could not bubble to the big button;

2. Very serious problem, we add touchmove event to Div and use Preventdefault () to mask the original browser events, resulting in sliding up and down div page can not scroll!

The first problem is easier to solve, we remove the span directly and write "delete" to the CSS: before, like this:

. itemwipe. Item-delete:before {
  content: ' Delete ';
  Color: #fff;
}

For the second question, the Internet is said to be solved with iscroll. We refer to the mobile phone QQ in the contact person's sliding operation.

General principle: At the beginning of the slide, judge whether the y-axis moves much or the x-axis moves more. If the x-axis movement is large, it is judged as a sliding delete operation, we use Preventdefault ();

The above is the entire content of this article, I hope to help you learn.