初始化

康凯

2022-05-20 aa4c235a8ca67ea8b731f90c951a465e92c0a865

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
// TODO Draggable for group
// FIXME Draggable on element which has parent rotation or scale
function Draggable() {
 
    this.on('mousedown', this._dragStart, this);
    this.on('mousemove', this._drag, this);
    this.on('mouseup', this._dragEnd, this);
    this.on('globalout', this._dragEnd, this);
    // this._dropTarget = null;
    // this._draggingTarget = null;
 
    // this._x = 0;
    // this._y = 0;
}
 
Draggable.prototype = {
 
    constructor: Draggable,
 
    _dragStart: function (e) {
        var draggingTarget = e.target;
        if (draggingTarget && draggingTarget.draggable) {
            this._draggingTarget = draggingTarget;
            draggingTarget.dragging = true;
            this._x = e.offsetX;
            this._y = e.offsetY;
 
            this.dispatchToElement(param(draggingTarget, e), 'dragstart', e.event);
        }
    },
 
    _drag: function (e) {
        var draggingTarget = this._draggingTarget;
        if (draggingTarget) {
 
            var x = e.offsetX;
            var y = e.offsetY;
 
            var dx = x - this._x;
            var dy = y - this._y;
            this._x = x;
            this._y = y;
 
            draggingTarget.drift(dx, dy, e);
            this.dispatchToElement(param(draggingTarget, e), 'drag', e.event);
 
            var dropTarget = this.findHover(x, y, draggingTarget).target;
            var lastDropTarget = this._dropTarget;
            this._dropTarget = dropTarget;
 
            if (draggingTarget !== dropTarget) {
                if (lastDropTarget && dropTarget !== lastDropTarget) {
                    this.dispatchToElement(param(lastDropTarget, e), 'dragleave', e.event);
                }
                if (dropTarget && dropTarget !== lastDropTarget) {
                    this.dispatchToElement(param(dropTarget, e), 'dragenter', e.event);
                }
            }
        }
    },
 
    _dragEnd: function (e) {
        var draggingTarget = this._draggingTarget;
 
        if (draggingTarget) {
            draggingTarget.dragging = false;
        }
 
        this.dispatchToElement(param(draggingTarget, e), 'dragend', e.event);
 
        if (this._dropTarget) {
            this.dispatchToElement(param(this._dropTarget, e), 'drop', e.event);
        }
 
        this._draggingTarget = null;
        this._dropTarget = null;
    }
 
};
 
function param(target, e) {
    return {target: target, topTarget: e && e.topTarget};
}
 
export default Draggable;