score:1
Accepted answer
first thing you are passing event as e to the function, so you have to do e.preventDefault()
instead of event.preventDefault
. Here your mousedown event is represented by e
Secondly, there is no need to listen to onMouseUp inside onMouseMove, following code should help you -
handleMouseDown(e) {
e.preventDefault();
let leftCol = e.target.parentElement
let rightCol = e.target.parentElement.nextSibling
let leftColOffset = leftCol.offsetWidth - e.pageX
let rightColOffset = rightCol.offsetWidth + e.pageX
onmousemove = (event) => {
leftCol.style.width = leftColOffset + event.pageX + 'px';
rightCol.style.width = rightColOffset - event.pageX + 'px';
}
onmouseup = () => {
onmousemove = null;
}
}
Source: stackoverflow.com
Related Query
- React escaping from mouse down event
- How to pass down event from parent to child in react with functional components?
- how to pass an event from a child component to parent component back down to another child in React
- OnChange event using React JS for drop down
- React - Prevent Event Trigger on Parent From Child
- Get object data and target element from onClick event in react js
- React - ul with onBlur event is preventing onClick from firing on li
- React setState hook from scroll event listener
- How to simulate mouse over event on a div using enzyme for testing a react application?
- React not responding to key down event
- import Event Types from React (TypeScript)
- React TypeScript get Data Attribute From Click Event
- Unsubscribe from event listener react hooks
- How to achieve re-useable components with React and mouse event propagation?
- Passing event and props from child to parent in react
- React JS: Pass event inside onChange drop down (Ant Design)
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- Mouse coordinates relative to currentTarget in React in event handler
- setState from a React material UI MenuItem click event
- React v16- d3 v4, when using mouse from d3-selection will get, TypeError: Cannot read property 'sourceEvent' of null?
- How do I programaticly navigate to a route from an event handler in React Router 4.0?
- How to handle mouse event in stateless component in React
- How to communicate from a grandchild up to its grandparent then back down to the grandparent's child in React Native
- How to make a Header that Animates from Transparent to Opaque Color on Scrolling down in React-Native React Navigation 5?
- What is the method can I use to send an event from native module to JS in React Native
- Stop event propagation from input in React
- React JS: How to send an event down the component tree?
- React Hooks : UseRef not recognizing Event from Material UI Select
- React native Material drop down get id from json data
- Enzyme/Mocha: How to test a react component function by firing an onChange event from a child component
More Query from same tag
- React hook form method - setValue - doesn't work
- react auto binding on click is automatic for this
- cant array.map with css grid to make table for dynamic data
- React propType specify allowed props value
- React JS: How to hide/show tabs?
- Perform operation on elements of array within an object of arrays
- How do I store data added in react-draft-wysiwyg Editor to my state
- React: Access properties of dynamically created elements by refs
- Create an embeddable widget using React
- How to use AutoPlay methods with React-slick useRef hook and typescript
- How to add tooltip to a disabled button using ReactStrap
- How to pass in the token for authorization in between React pages (in a Django Knox setup)?
- How to remove duplicate arithmetic operators using regex
- first material UI button hides
- Firebase and React Hooks (useState & useEffect)
- Webpack 1.15.0 FeathersJS React Redux Material-UI styles not compiled or present in rendered DOM
- Getting empty data object from my form react-hook-form
- action function is not being executed
- Reactjs have <div> wrapper the elements on every 4th elements
- Jest error with css files
- react SetState not updaing state immediately
- How to manage state in a react button component on submit
- React Router Redux Immutable
- isValid stays false after form validates
- Encountered "Error: Material-UI: capitalize(string) expects a string argument." when using snackbar in React Material-UI
- How to change navigation bar title when view loads
- How do you make a button show a + (plus sign) when not clicked, and - (minus sign) when clicked?
- React router dom type error / FC{} | ReactNode is not assignable to type ReactNode
- Creating Styled component with multiple elements
- React store promise array of objects in state