Created
July 2, 2018 06:54
-
-
Save littledian/548c025182735864d9ff1d7813299cf3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function drag ( | |
| { | |
| mouseDownEvent, | |
| element, | |
| once = false, | |
| mouseDownCallback = () => {}, | |
| mouseMoveCallback = () => {}, | |
| mouseUpCallback = () => {} | |
| }) { | |
| if (!mouseDownEvent && !element) { | |
| console.error('Must provide mouseDownEvent or element') | |
| } | |
| if (mouseDownEvent && !(mouseDownEvent instanceof MouseEvent)) { | |
| console.error('mouseDownEvent must be instance of MouseEvent', mouseDownEvent) | |
| return | |
| } | |
| if (!mouseDownEvent && element) { | |
| const fn = event => { | |
| drag({ | |
| mouseDownEvent: event, | |
| mouseDownCallback, | |
| mouseMoveCallback, | |
| mouseUpCallback: event => { | |
| if (once) { | |
| element.removeEventListener('mousedown', fn) | |
| } | |
| mouseDownCallback(event) | |
| } | |
| }) | |
| } | |
| element.addEventListener('mousedown', fn) | |
| return | |
| } | |
| let moveInfo = {} | |
| function mouseDown () { | |
| const currentTarget = mouseDownEvent.currentTarget | |
| if (!currentTarget) { | |
| console.error('No currentTarget property', mouseDownEvent) | |
| } | |
| if (!currentTarget.getBoundingClientRect) { | |
| console.error('Element is not support getBoundingClientRect function', currentTarget) | |
| } | |
| // x、y、width、height may not exist | |
| const {left, right, top, bottom} = currentTarget.getBoundingClientRect() | |
| const width = right - left | |
| const height = bottom - top | |
| const moveElm = currentTarget.cloneNode(true) | |
| moveElm.style.position = 'fixed' | |
| moveElm.style.zIndex = 999 | |
| moveElm.style.left = left + 'px' | |
| moveElm.style.top = top + 'px' | |
| moveElm.style.width = width + 'px' | |
| moveElm.style.height = height + 'px' | |
| if (moveElm.style.userSelect) { | |
| moveElm.style.userSelect = 'none' | |
| } | |
| if (moveElm.style.msUserSelect) { | |
| moveElm.style.msUserSelect = 'none' | |
| } | |
| if (moveElm.style.webkitUserSelect) { | |
| moveElm.style.webkitUserSelect = 'none' | |
| } | |
| if (moveElm.style.mozUserSelect) { | |
| moveElm.style.mozUserSelect = 'none' | |
| } | |
| const overlay = document.createElement('div') | |
| overlay.style.text = [ | |
| 'position: fixed', | |
| 'left: 0', | |
| 'right: 0', | |
| 'top: 0', | |
| 'bottom: 0', | |
| 'z-index: 998' | |
| ].join(';') | |
| currentTarget.parentElement.insertBefore(moveElm, currentTarget) | |
| document.body.appendChild(overlay) | |
| moveInfo = { | |
| left, | |
| top, | |
| width, | |
| height, | |
| startX: mouseDownEvent.x, | |
| startY: mouseDownEvent.y, | |
| moveElm, | |
| overlay | |
| } | |
| document.addEventListener('mousemove', mouseMove) | |
| document.addEventListener('mouseup', mouseUp) | |
| mouseDownCallback(mouseDownEvent) | |
| } | |
| function mouseMove (event) { | |
| const currentX = event.x | |
| const currentY = event.y | |
| moveInfo.moveElm.style.left = moveInfo.left + currentX - moveInfo.startX + 'px' | |
| moveInfo.moveElm.style.top = moveInfo.top + currentY - moveInfo.startY + 'px' | |
| mouseMoveCallback(event) | |
| } | |
| function mouseUp (event) { | |
| document.removeEventListener('mousemove', mouseMove) | |
| document.removeEventListener('mouseup', mouseUp) | |
| moveInfo.moveElm.parentElement.removeChild(moveInfo.moveElm) | |
| document.body.removeChild(moveInfo.overlay) | |
| mouseUpCallback(event) | |
| } | |
| mouseDown() | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment