快速定義可複用且高度自定義的拖拽 / 滑動方法

拖拽 / 滑動事件中所存在的問題

前端開發中有許許多多的拖拽與手機滑動的行爲，大多數UI庫都封裝了不少這類事件，但這樣卻有個問題。就是當咱們須要根據自身狀況邏輯來定義這類事件時卻會有很大侷限性，原生代碼實現又十分繁瑣複製，且難以管理。

resusable-drag庫的實現觀念

意識到這個問題後我開發了一個實現可複用拖拽/滑動的功能庫，語法架構參考Vue的數據管理結構，該庫實現的觀念是能夠高度自定義實現這類事件，並有很好的擴展性與簡便性。
github地址: https://github.com/TuiMao233/...
npm地址: https://www.npmjs.com/package...
該庫的使用步驟以下。

引入庫

import reusableDrag from 'resusable-drag'

<!-- 又或者script中引入 -->
<script src="./js/resusable-drag.js"></script>

定義一個滑動/拖拽封裝

const touch_sliding_screen = new reusableDrag({
    data() {
        return {
            // 自定義默認使用的數據，滑動延遲，或者其餘數據等
            // 在這裏定義的數據可在後續邏輯中使用
            wrapper: this.el.querySelector('.wrapper'),
            pagination: this.el.querySelector('.pagination'),
            slidingDistance: 300,
            delay: 2000,
            //.....
        }
    },
    mounted() {
        // 定義初始化執行
        this.el.style.background = 'rgba(0,0,0,.5)'
        //....
    },
    methods: {
      // 定義行爲方法
      setWidth :function () {
        //....
      }
    },
    // resusable-drag 會檢測當前設備類型, 當檢測到是移動設備時, 自動切換爲touch等事件
    touch: {
        // 定義滑屏事件行爲
        start: function (ev) {
        },
        move: function (ev) {
        },
        end: function (ev) {
        }
    },
    // resusable-drag 會檢測當前設備類型, 當檢測到是PC設備時, 自動切換爲mouse等事件
    /* mouse: {
        // 或定義PC端拖拽事件行爲
        down (ev) {},move (ev) {},up (ev) {}
    }, */
})

建立一個拖拽/滑動

在建立一個拖拽時，能夠傳入自定義數據，該數據會覆蓋掉data中的數據，而且會在事件邏輯中使用覆蓋數據。

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
})