Custom drag-and-drop instructions in Vue's mobile app project

Using Vue know that Vue has a custom directive, I prefer to drag and drop the custom instructions, feel very convenient!

Drag-and-drop instructions within the component directives: {    //build-in custom directive    drag: {      //directive definition      bind:function (el, value) {let        odiv = el;// The current element let self        = this;//context        Odiv.ontouchstart = function (e) {          //mouse down, calculates the distance of the current element from the visible area let          disx = e.touches [0].clientx-odiv.offsetleft;          Let Disy = E.touches[0].clienty-odiv.offsettop;          ODiv.style.zIndex = 3;                           Document.ontouchmove = function (e) {            //through event delegation, calculate the distance to move let            l = e.touches[0].clientx-disx;            Let T = E.touches[0].clienty-disy;            Move current element            //   ODiv.style.left = l + ' px ';                                  Document.ontouchend = function (e) {            oDiv.style.zIndex = 2;                       }            Document.ontouchmove = null;            Document.ontouchend = null;}}  } This is the approximate framework in which El refers to the bound element, and value is the value that is passed.

Usage:

<div v-drag= ' {data:fills,info:data} ' > Drag </div><!--{} All of the parameters are passed, corresponding to the above value-->

The above is the script and usage of drag and drop instructions, but this is not the main content, when you use custom instructions on the mobile side, if your company needs to be compatible with a variety of mobile phone versions and various system versions, then you may need to remove him, I met the Apple 5s does not support, if the use of custom instructions, then he will blink , no content, is white screen state, so say, want to use custom directives, to consider the test environment!

Custom drag-and-drop instructions in Vue's mobile app project