Skip to content

Commit e1b6f32

Browse files
JackPuJackPu
committed
add demo folder
1 parent dd78074 commit e1b6f32

File tree

4 files changed

+92
-152
lines changed

4 files changed

+92
-152
lines changed

‎.eslintrc.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
},
99
"rules": {
1010
"func-names": 0,
11-
"comma-dangle": 0,
11+
"prefer-template": 0,
12+
"dot-notation": 0,
13+
"radix": 0,
14+
"no-mixed-operators": 0,
15+
"comma-dangle": 0
1216
}
1317
}

‎src/demo.js‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/lib/drag.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import helper from './helper';
22

33
const isMobile = helper.isMobile;
4-
let moves, stopM;
4+
let moves;
5+
let stopM;
56
export default class Drag {
67
constructor($el, $container, e) {
78
const self = this;
89
this.el = $el;
910
this.container = $container;
1011
this.coor = {
11-
x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft - $el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft
12-
, y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop - $el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop
13-
, posX: isMobile ? e.touches[0]['clientX'] : e.clientX
14-
, posy: isMobile ? e.touches[0]['clientY'] : e.clientY
15-
, maxLeft: parseInt(this.container.style.width) - parseInt(this.el.style.width)
16-
, maxTop: parseInt(this.container.style.height) - parseInt(this.el.style.height)
17-
, };
18-
moves = function (e) {
19-
self.move(e);
20-
}
21-
stopM = function (e) {
22-
self.stopMove(e);
23-
}
12+
x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft - $el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft,
13+
y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop - $el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop,
14+
posX: isMobile ? e.touches[0]['clientX'] : e.clientX,
15+
posy: isMobile ? e.touches[0]['clientY'] : e.clientY,
16+
maxLeft: parseInt(this.container.style.width) - parseInt(this.el.style.width),
17+
maxTop: parseInt(this.container.style.height) - parseInt(this.el.style.height),
18+
};
19+
moves = function (ev) {
20+
self.move(ev);
21+
};
22+
stopM = function (ev) {
23+
self.stopMove(ev);
24+
};
2425
if (isMobile) {
2526
document.addEventListener('touchmove', moves, false);
2627
document.addEventListener('touchend', stopM, false);
@@ -35,10 +36,10 @@ export default class Drag {
3536
}
3637
// this.coor.posX = isMobile ? e.changedTouches[0]['clientX']:e.clientX;
3738
// this.coor.posY = isMobile ? e.changedTouches[0]['clientY']:e.clientY;
38-
var aa = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
39-
var bb = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
40-
var newPosX = aa - this.el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - this.coor.x;
41-
var newPosY = bb - this.el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - this.coor.y;
39+
const aa = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
40+
const bb = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
41+
let newPosX = aa - this.el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - this.coor.x;
42+
let newPosY = bb - this.el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - this.coor.y;
4243
if (newPosX <= 0) {
4344
newPosX = 0;
4445
}
@@ -55,7 +56,6 @@ export default class Drag {
5556
this.el.style.top = (newPosY) + 'px';
5657
}
5758
stopMove() {
58-
var self = this;
5959
this.el = null;
6060
if (isMobile) {
6161
document.removeEventListener('touchmove', moves, false);
@@ -65,4 +65,4 @@ export default class Drag {
6565
document.removeEventListener('mousemove', moves, false);
6666
document.removeEventListener('mouseup', stopM, false);
6767
}
68-
};
68+
}

‎src/lib/resize.js‎

Lines changed: 67 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
* e events
66
**/
77
import helper from './helper';
8+
89
let drags;
910
let stopD;
1011
const isMobile = helper.isMobile;
12+
const W = document.body.offsetWidth;
13+
const H = document.body.offsetHeight;
1114
export default class Resize {
1215
constructor($el, $container, ratio, e) {
1316
e.stopPropagation();
@@ -22,113 +25,91 @@ export default class Resize {
2225
this.splitY = ratio.split(':')[1];
2326
this.el = $el;
2427
this.container = $container;
25-
drags = function (e) {
26-
self.drag(e);
28+
drags = function (ev) {
29+
self.drag(ev);
2730
};
28-
stopD = function(e) {
29-
self.stopDrag(e);
30-
}
31-
if(isMobile) {
31+
stopD = function (ev) {
32+
self.stopDrag(ev);
33+
};
34+
if (isMobile) {
3235
document.addEventListener('touchmove', drags, false);
33-
document.addEventListener('touchend', stopD, false)
36+
document.addEventListener('touchend', stopD, false);
3437
}
3538
document.addEventListener('mousemove', drags, false);
3639
document.addEventListener('mouseup', stopD, false);
37-
3840
}
3941

4042
drag(e) {
41-
if(!this.el) {
43+
if (!this.el) {
4244
return;
4345
}
44-
let $dotBox = document.querySelector('.g-crop-image-principal');
45-
let $topH = document.querySelector('.info-aside');
46-
let $halfX = parseInt(document.body.offsetWidth) - parseInt(window.getComputedStyle($dotBox).width);
47-
let $halfY = parseInt(document.body.offsetHeight) - parseInt(window.getComputedStyle($dotBox).height) - parseInt(window.getComputedStyle($topH).height);
48-
let resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
49-
let resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
46+
const $dotBox = document.querySelector('.g-crop-image-principal');
47+
const dotBoxW = window.getComputedStyle($dotBox).width;
48+
const dotBoxH = window.getComputedStyle($dotBox).height;
49+
const $topH = document.querySelector('.info-aside');
50+
const $halfX = W - dotBoxW;
51+
const $halfY = H - dotBoxH - window.getComputedStyle($topH).height;
52+
const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
53+
const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
5054

5155
if (this.splitX > this.splitY) {
52-
if (parseInt(resetX) >= ($halfX / 2) + parseInt(window.getComputedStyle($dotBox).width)) {
53-
return;
54-
} else {
55-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
56+
if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) {
57+
if (parseInt(this.el.offsetWidth) >= dotBoxW) {
5658
this.el.style.width = window.getComputedStyle($dotBox).width;
57-
};
58-
this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX']:e.clientX) - this.coor.x) + 'px';
59+
}
60+
this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - this.coor.x) + 'px';
5961
this.el.style.height = parseInt(this.el.offsetWidth) * (this.splitY / this.splitX) + 'px';
60-
//限制拖拉的范围在图片内
61-
if ( parseInt(window.getComputedStyle($dotBox).width) > parseInt(window.getComputedStyle($dotBox).height)) {
62+
if (dotBoxW > dotBoxH) {
6263
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).height)) {
6364
this.el.style.height = window.getComputedStyle($dotBox).height;
6465
this.el.style.width = parseInt(window.getComputedStyle($dotBox).height) * (this.splitX / this.splitY) + 'px';
65-
return;
66-
};
67-
} else if(parseInt(window.getComputedStyle($dotBox).width) < parseInt(window.getComputedStyle($dotBox).height)) {
68-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
69-
this.el.style.width = window.getComputedStyle($dotBox).width;
70-
this.el.style.height = parseInt(window.getComputedStyle($dotBox).width) * (this.splitY / this.splitX) + 'px';
71-
return;
7266
}
73-
} else {
74-
if (parseInt(this.el.offsetHeight) >= parseInt(window.getComputedStyle($dotBox).width)) {
67+
} else if (dotBoxW < dotBoxH) {
68+
if (parseInt(this.el.offsetWidth) >= dotBoxW) {
7569
this.el.style.width = window.getComputedStyle($dotBox).width;
76-
this.el.style.height = parseInt(window.getComputedStyle($dotBox).width) * (this.splitY / this.splitX) + 'px';
77-
return;
70+
this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px';
7871
}
72+
} else if (parseInt(this.el.offsetHeight) >= dotBoxW) {
73+
this.el.style.width = dotBoxW;
74+
this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px';
7975
}
8076
}
81-
} else if(this.splitX < this.splitY){
82-
if (parseInt(resetY) >= ($halfY / 2) + parseInt(window.getComputedStyle($dotBox).height) + parseInt(window.getComputedStyle($topH).height)) {
83-
return;
84-
} else {
85-
this.el.style.height = (this.coor.h + (isMobile ? e.changedTouches[0]['clientY']:e.clientY) - this.coor.y) + 'px';
77+
} else if (this.splitX < this.splitY) {
78+
if (parseInt(resetY) <= ($halfY / 2) + dotBoxH + window.getComputedStyle($topH).height) {
79+
this.el.style.height = (this.coor.h + (isMobile ? e.changedTouches[0]['clientY'] : e.clientY) - this.coor.y) + 'px';
8680
this.el.style.width = parseInt(this.el.style.height) * (this.splitX / this.splitY) + 'px';
87-
//限制拖拉的范围在图片内
88-
if ( parseInt(window.getComputedStyle($dotBox).width) > parseInt(window.getComputedStyle($dotBox).height)) {
89-
if (parseInt(this.el.offsetHeight) >= parseInt(window.getComputedStyle($dotBox).height)) {
90-
this.el.style.height = window.getComputedStyle($dotBox).height;
91-
this.el.style.width = parseInt(window.getComputedStyle($dotBox).height) * (this.splitX / this.splitY) + 'px';
92-
return;
93-
};
94-
} else if(parseInt(window.getComputedStyle($dotBox).width) < parseInt(window.getComputedStyle($dotBox).height)) {
95-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
96-
this.el.style.width = window.getComputedStyle($dotBox).width;
97-
this.el.style.height = parseInt(window.getComputedStyle($dotBox).width) * (this.splitY / this.splitX) + 'px';
98-
return;
81+
// 限制拖拉的范围在图片内
82+
if (dotBoxW > dotBoxH) {
83+
if (parseInt(this.el.offsetHeight) >= dotBoxH) {
84+
this.el.style.height = dotBoxH;
85+
this.el.style.width = dotBoxH * (this.splitX / this.splitY) + 'px';
9986
}
100-
} else {
101-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
102-
this.el.style.width = window.getComputedStyle($dotBox).width;
103-
this.el.style.height = parseInt(window.getComputedStyle($dotBox).width) * (this.splitY / this.splitX) + 'px';
104-
return;
87+
} else if (dotBoxW < dotBoxH) {
88+
if (parseInt(this.el.offsetWidth) >= dotBoxW) {
89+
this.el.style.width = dotBoxW;
90+
this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px';
10591
}
92+
} else if (parseInt(this.el.offsetWidth) >= dotBoxW) {
93+
this.el.style.width = dotBoxW;
94+
this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px';
10695
}
10796
}
108-
} else {
109-
if (parseInt(resetX) >= ($halfX / 2) + parseInt(window.getComputedStyle($dotBox).width)) {
110-
//现在拖拉范围不准超过某一边的范围
111-
return;
112-
} else {
113-
114-
this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX']:e.clientX) - this.coor.x) + 'px';
115-
this.el.style.height = this.el.style.width;
116-
//限制拖拉的范围在图片内
117-
if ( parseInt(window.getComputedStyle($dotBox).width) > parseInt(window.getComputedStyle($dotBox).height)) {
118-
if (parseInt(this.el.offsetHeight) >= parseInt(window.getComputedStyle($dotBox).height)) {
119-
this.el.style.height = window.getComputedStyle($dotBox).height;
120-
this.el.style.width = window.getComputedStyle($dotBox).height;
121-
};
122-
} else if(parseInt(window.getComputedStyle($dotBox).width) < parseInt(window.getComputedStyle($dotBox).height)) {
123-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
124-
this.el.style.width = window.getComputedStyle($dotBox).width;
125-
this.el.style.height = window.getComputedStyle($dotBox).width;
126-
}
127-
} else {
128-
if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).width)) {
129-
this.el.style.width = this.el.style.height = window.getComputedStyle($dotBox).width;
130-
}
97+
} else if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) {
98+
this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - this.coor.x) + 'px';
99+
this.el.style.height = this.el.style.width;
100+
// 限制拖拉的范围在图片内
101+
if (dotBoxW > dotBoxH) {
102+
if (parseInt(this.el.offsetHeight) >= dotBoxH) {
103+
this.el.style.height = dotBoxH;
104+
this.el.style.width = dotBoxH;
105+
}
106+
} else if (dotBoxW < dotBoxH) {
107+
if (parseInt(this.el.offsetWidth) >= dotBoxW) {
108+
this.el.style.width = dotBoxW;
109+
this.el.style.height = dotBoxW;
131110
}
111+
} else if (parseInt(this.el.offsetWidth) >= dotBoxW) {
112+
this.el.style.width = this.el.style.height = dotBoxW;
132113
}
133114
}
134115
// if(isMobile) {
@@ -138,14 +119,13 @@ export default class Resize {
138119
// }
139120
}
140121

141-
stopDrag(e) {
122+
stopDrag() {
142123
this.el = null;
143-
if(isMobile) {
144-
document.removeEventListener('touchmove',drags,false);
145-
document.removeEventListener('touchend',stopD,false);
124+
if (isMobile) {
125+
document.removeEventListener('touchmove', drags, false);
126+
document.removeEventListener('touchend', stopD, false);
146127
}
147-
document.removeEventListener('mousemove',drags,false);
148-
document.removeEventListener('mouseup',stopD,false);
149-
//this.container = null;
128+
document.removeEventListener('mousemove', drags, false);
129+
document.removeEventListener('mouseup', stopD, false);
150130
}
151-
};
131+
}

0 commit comments

Comments
 (0)