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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.