vmui/draggable.js at master · Pumpkinshow/vmui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import _ from './helper';

class Draggable{
    constructor(element, options = {}){
        this.dom = element;
        this.dom.$draggable = this;
        this.options = Object.assign({
            axis: 'xy',
            stackTimes: 1,
            ignores: null,
            canDrag(){return true}
        }, options);

        this.stack(this.options.stackTimes);
        this.initEvent();
    }

    initEvent(){
        var self = this, options = self.options;

        _.on(self.dom, 'touchstart', (event) => {
            var target = event.target;

            if(target && (
                options.ignores && options.ignores.test(target.tagName) ||
                Draggable.isOtherDraggable(target, self)
            )){
                return false;
            }

            var {x, y} = self.translates = Draggable.getTransform(self.dom);
            var {pageX, pageY} = self.touch = event.touches[0];

            _.trigger(self.dom, 'drag:start', {
                x, y, pageX, pageY, event
            });
        });

        _.on(document, 'touchmove', (event) => {
            if(!self.touch){
                return false;
            }

            event.preventDefault();

            var touch = event.touches[0];
            var {pageX, pageY} = self.touch;
            var axis = options.axis;
            var x = 0, y = 0;
            var rx = (touch.pageX - pageX)/options.stackTimes, ry = (touch.pageY - pageY)/options.stackTimes;

            if(/x/.test(axis)){
                x = rx + self.translates.x;
            }

            if(/y/.test(axis)){
                y = ry + self.translates.y;
            }

            var info = {
                x, y, pageX: touch.pageX, pageY: touch.pageY, event
            };

            self.translates = {x, y};
            self.touch = {
                pageX: touch.pageX,
                pageY: touch.pageY
            };

            if(!options.canDrag.call(self, {x, y, rx, ry})){
                _.trigger(self.dom, 'drag:reject', info);
                return false;
            }

            _.css(self.dom, 'transform', `translate3d(${x}px, ${y}px, 0)`);
            _.trigger(self.dom, 'draging', info);
        });

        _.on(document, 'touchend', (event) => {
            if(!self.touch){
                return false;
            }

            self.touch = null;

            var {x, y} = Draggable.getTransform(self.dom);

            _.trigger(self.dom, 'drag:end', {
                x, y, event
            });
        });
    }

    stack(times = 1){
        this.options.stackTimes = times;
    }
}

Draggable.getTransform = (element) => {
    var matrix = _.css(element, 'transform'), x = 0, y = 0;

    if(matrix && matrix != 'none'){
        if(matrix[0] != '['){
            matrix.replace(/translate(3d|X|Y|)\((.+)\)/g, function(all, type, value){
                if(type == 'X'){
                    x = parseFloat(value);
                }else if(type == 'Y'){
                    y = parseFloat(value);
                }else{
                    value = value.split(/\s*,\s*/);
                    x = parseFloat(value[0]);
                    y = parseFloat(value[1]);
                }
            });
        }else{
            matrix = matrix.split(')')[0].split(', ');
            x = +(matrix[12] || matrix[4]);
            y = +(matrix[13] || matrix[5]);
        }
    }

    return { x: x, y: y };
};

Draggable.isOtherDraggable = (target, instance) => {
    do{
        if(target.$draggable){
            return instance !== target.$draggable;
        }
    }while(target = target.parentNode);

    return false;
};

module.exports = {
    bind(element, data){
        new Draggable(element, data.value);
    }
};

module.exports.Draggable = Draggable;