ReusableDrag

touch / mouse create utils

import resusable-drag

import reusableDrag from 'resusable-drag'

<!-- or script -->
<script src="./js/resusable-drag.js"></script>

Define drag

const touch_sliding_screen = new reusableDrag({
    data() {
        return {
            // Define state
            wrapper: this.el.querySelector('.wrapper'),
            pagination: this.el.querySelector('.pagination'),
            slidingDistance: 300,
            delay: 2000,
            //.....
        }
    },
    mounted() {
        // Define init
        this.el.style.background = 'rgba(0,0,0,.5)'
        //....
    },
    methods: {
      // Define methods
      setWidth :function () {
        //....
      }
    },
    // reusable-drag will detect the current device type, 
    // and when it is detected as a mobile device, it will automatically switch to touch and other events
    touch: {
        // Define touch event
        start: function (ev) {
        },
        move: function (ev) {
        },
        end: function (ev) {
        }
    },
    // reusable-drag will detect the current device type,
    // and when it is detected as a PC device, it will automatically switch to mouse and other events
    /* mouse: {
        // Define mouse event
        down (ev) {},move (ev) {},up (ev) {}
    }, */
})

create drag

touch_sliding_screen.create({
    el:document.querySelector('.mi-carousel'),
    slidingDistance: 300,
    delay: 1000,
    // mouseclasp:{down(r){},move(r){},up(r){}}, // mouseclasp
    // touchclasp:{start(r){},move(r){},end(r){}}  // touchclasp
})