Larger draggable area

Signed-off-by: default avatarYukai Huang <yukaihuangtw@gmail.com>
parent 3f4b805d
......@@ -131,7 +131,11 @@ function addImageZoomListener (container) {
function addImageDragListener (image) {
let moved = false
let pos = []
image.addEventListener('mousedown', (evt) => {
const container = findOrCreateLightboxContainer()
const inner = container.querySelector('.lightbox-inner')
const onMouseDown = (evt) => {
moved = true
const { left, top } = image.getBoundingClientRect()
......@@ -140,9 +144,11 @@ function addImageDragListener (image) {
evt.pageX - left,
evt.pageY - top
]
}, true)
}
image.addEventListener('mousedown', onMouseDown)
inner.addEventListener('mousedown', onMouseDown)
image.addEventListener('mousemove', (evt) => {
const onMouseMove = (evt) => {
if (!moved) {
return
}
......@@ -150,17 +156,20 @@ function addImageDragListener (image) {
image.style.left = `${evt.pageX - pos[0]}px`
image.style.top = `${evt.pageY - pos[1]}px`
image.style.position = 'absolute'
}, true)
}
image.addEventListener('mousemove', onMouseMove)
inner.addEventListener('mousemove', onMouseMove)
image.addEventListener('mouseup', () => {
const onMouseUp = () => {
moved = false
pos = []
}, true)
}
image.addEventListener('mouseup', onMouseUp)
inner.addEventListener('mouseup', onMouseUp)
image.addEventListener('mouseout', () => {
moved = false
inner.addEventListener('click', (e) => {
e.stopPropagation()
})
image.addEventListener('click', (e) => {
e.stopPropagation()
})
......
......@@ -72,6 +72,29 @@
right: 10px;
}
.lightbox-container .lightbox-inner {
width: 100%;
height: 100%;
cursor: move;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.lightbox-container .lightbox-inner img {
max-width: 100%;
cursor: move;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment