https://belarusborder.com/public/js/class_drag.js

1class DragClass {
2
3    constructor() {
4        this.events = [];
5        this.mode = 0;       
6    }
7    
8    i(){
9        var _t = this;
10        _t.m = ELEM.blocksArea;
11        _t.o = C.c(USER.blocks);
12        _t.E1 = (USER.T) ? "touchstart" : "mousedown";
13        _t.E2 = (USER.T) ? "touchmove" : "mousemove";
14        _t.E3 = (USER.T) ? "touchend" : "mouseup";
15        _t.EH = (USER.T) ? 'touchstart' : 'mouseover';        
16        _t.ma = _t.dragStart.bind(_t);
17        _t.mb = _t.drag.bind(_t);
18        _t.mc = _t.dragEnd.bind(_t);  
19        _t.md = _t.scroll.bind(_t);
20        _t.mctrl = _t.cntrM.bind(_t);
21    }
22    mod(v){
23        this.mode = v;
24        NODE[v ? 'cA':'cR'](ELEM.blocksArea,'drag-mode');
25        ELEM.workarea.style.overflow = v ? 'unset' : null;
26    }
27    
28    aEvt(){
29        this.mod(1);
30        var _t = this;
31        _t.mC();
32        _t.rebldD();
33        _t.m.addEventListener(_t.E1, _t.ma);
34        _t.m.addEventListener(_t.E2, _t.mb);
35        _t.m.addEventListener(_t.E3, _t.mc);
36        document.addEventListener(_t.E2, _t.mctrl);
37    }
38    
39    rEvt() {
40        this.mod();
41        var _t = this;
42        _t.m.removeEventListener(_t.E1, _t.ma);
43        _t.m.removeEventListener(_t.E2, _t.mb);
44        _t.m.removeEventListener(_t.E3, _t.mc);
45        document.removeEventListener(_t.E2, _t.mctrl);
46    }
47    
48    cntrM(e) {
49        if (!this.dragid)
50            return;
51        var x, y;
52        if (e.type === "touchmove") {
53            x = e.touches[0].clientX;
54            y = e.touches[0].clientY;
55        } else {
56            x = e.clientX;
57            y = e.clientY;
58        }
59        if (x > this.coords.right || x < this.coords.left || y < this.coordsN.top || y > (this.coordsN.top + this.mH))
60            this.dragEnd(e, "block" + this.dpos);
61    }    
62    scroll(e) {
63        this.coordsN = this.m.getBoundingClientRect();
64    }
65    mC(){
66        this.coords = this.m.getBoundingClientRect();
67        this.coordsN = this.coords;        
68    }    
69    
70    dragStart(e) {
71        //console.log('dragStart',e, e.target, /block\d/.test(e.target.id));
72        if (!DRAG.mode) return;        
73        this.eo = e.target.id;
74        this.eot = DATES.now('unix');
75        if (e.type === "touchstart") {
76            this.initialX = e.touches[0].clientX;
77            this.initialY = e.touches[0].clientY;
78            this.pageX = e.pageX;
79            this.pageY = e.pageY;
80        } else {
81            this.initialX = e.clientX;
82            this.initialY = e.clientY;
83        }
84        if (!this.dragid) {
85            if (/block\d$/.test(e.target.id) ||
86                    e.target.closest('[id^=rblock_]') || /rblock_/.test(e.target.id)) 
87                return;
88            this.dragid = e.target.id;
89            var mf = document.elementFromPoint(this.initialX, this.initialY).parentElement.id;
90            //console.log('DETECTDRAG',mf, e.target, this.dragid, document.elementFromPoint(this.initialX, this.initialY))
91            this.dpos = parseInt(mf.replace(/\D/g, ""));
92            if (isNaN(this.dpos))
93                this.dragid = false;
94        }
95    }
96    dragTime(e) {
97        //console.log('dragTime',e, this.dragid);
98        var _t = this;
99        if (_t.time)
100            _t.dragEnd(e);
101        else
102            _t.time = setTimeout(function () {
103                _t.dragTime(e)
104            }, 500);
105    }
106    drag(e) {
107        //console.log('drag',e, this.dragid);
108        if (!this.dragid) return;
109        e.preventDefault();
110        var ed = (e.type === "touchmove") ? e.touches[0] : e;
111        if (e.type === "touchmove") {
112            if (this.time) clearTimeout(this.time);
113            this.time = false;
114            this.dragTime(e);
115        }
116        this.currentX = ed.clientX - this.initialX;
117        this.currentY = ed.clientY - this.coords.top - 15 + (this.coords.top - this.coordsN.top)
118        this.setTranslate(this.currentX, this.currentY);
119        var nd = document.elementFromPoint(ed.clientX, ed.clientY);
120        if (nd.parentNode.id && nd.id) {
121            var p = parseInt(nd.parentNode.id.replace(/\D/g, ""));
122            if(isNaN(p)) { 
123                this.rebldD();
124                this.dropDragid();
125                return;
126            }
127            //console.log('DRAG',p, this.dpos, (p - 1) == this.dpos, (p + 1) == this.dpos, nd, this.o)
128            if ((p - 1) == this.dpos) {
129                NODE.eGi("block" + (p - 1)).append(NODE.eGi("_m_" + this.o[p]));
130                var ind = this.o.indexOf(this.o[p]);
131                var onew = this.o[p];
132                this.o.splice(ind, 1);
133                this.o.splice((p - 1), 0, onew);
134            } else if ((p + 1) == this.dpos) {
135                NODE.eGi("block" + (p + 1)).append(NODE.eGi("_m_" + this.o[p]));
136                var ind = this.o.indexOf(this.o[p]);
137                var onew = this.o[p];
138                this.o.splice(ind, 1);
139                this.o.splice((p + 1), 0, onew);
140            } else {
141                var did = this.dragid.replace(/^_m_/, '');
142                var ind = this.o.indexOf(did);
143                this.o.splice(ind, 1);
144                this.o.splice(p, 0, did);
145                //this.rebldD();
146            }
147            this.dpos = p;
148        }
149    }
150    setTranslate(xPos, yPos) {
151        var d = NODE.eGi(this.dragid);
152        NODE.cA(d, "m-drag");
153        d.style.top = yPos + "px";
154        NODE.cA(this.m, 'm-freeze');
155    }
156    dropDragid() {
157        //console.log('dragDrop', this.dragid);
158        var d = NODE.eGi(this.dragid);
159        //NODE.aR(d, "style");
160        d.style.top = null;
161        NODE.cR(d, "m-drag");
162        NODE.cR(this.m, 'm-freeze');
163        this.dragid = false;

164        if (this.time)
165            clearTimeout(this.time);
166    }
167    dragEnd(e, mf = null) {
168        //console.log('dragEnd',e, this.dragid);
169        var _t = this, d, ed;
170        if (!this.dragid)
171            return;
172        e.preventDefault();
173        if (mf == null) {
174            if (e.clientX || e.changedTouches)
175                ed = (e.changedTouches) ? e.changedTouches[0] : e;
176            else {
177                this.clientX = e.pageX - this.pageX + this.initialX;
178                this.clientY = e.pageY - this.pageY + this.initialY;
179                ed = this;
180            }
181            d = document.elementFromPoint(ed.clientX, ed.clientY);
182            if (!d.id) d = d.closest("[id^=block]");
183            
184            if(d) {
185                mf = d.id;
186                if (e.clientX || e.changedTouches) {
187                    if (!/block\d/.test(mf)) mf = d.parentNode.id;
188                    if (!/\d/.test(mf)) {
189                        _t.rebldD();
190                        return;
191                    }
192                }
193            }
194        }
195        if (mf) {
196            var p = parseInt(mf.replace(/\D/g, ""));
197            var did = _t.rmId(_t.dragid);
198            _t.o.splice(p, 0, did);
199            _t.rebldD();
200        } 
201        else _t.rebldD();
202        _t.dropDragid();
203    }
204    aId(id){
205        var did = id.replace(/^_m_/, '');
206        var ind = this.o.indexOf(did);
207        if(ind>=0) return;
208        this.o.unshift(did);
209        this.uId();
210    }
211    rmId(id){
212        var did = id.replace(/^_m_/, '');
213        var ind = this.o.indexOf(did);
214        this.o.splice(ind, 1);
215        this.uId();
216        return did;
217    }
218    uId(){
219        NODE.eG('[id^=block]',1).forEach((b,i)=>b.id = 'block'+i);
220    }
221
222    rebldD(a = null) {
223        var _t = this, c = 0, el, j;
224        _t.o.forEach(function (e, i) {
225            var d_ = NODE.eGi('block'+i);
226            //console.log('rebldD',e,i,d_);
227            el = NODE.eGi('_m_' + e);
228            d_.append(el);          
229            j = i;
230        });
231        _t.mH = _t.m.offsetHeight;
232        USER.save('bb_blocks',C.c(_t.o));
233        USER.blocks = _t.o;
234        return;
235        _t.m.innerHTML = NODE.eG(".premarket").innerHTML;
236        NODE.eG(".premarket").innerHTML = "";
237        
238        NODE.eG("#_m .marketfield .nt", "s").forEach(el => el.addEventListener("click", _t.me));
239        _t.chkBoxE();
240        
241        this.mBin(0);
242        NODE.eG('[data-hint="true"]','s').forEach(e=>delete e.dataset.hint);
243        CRT.hint();
244    }
245
246}