score:0
as i cannot run your current reactjs application, i have pieced together a short example to show different instances of the drag and drop functionality.
as you can see by the example setting the draggable
attribute to your element should make the element draggable, as it would look dragging an image on a typical webpage.
can you confirm that when dragging your element, it doesn't move at all as seen in the code snippet for the not draggable box?
var draggable = document.getelementbyid('draggable');
function ondragstart(event) {
event.datatransfer.setdata('text/html', null); //cannot be empty string
var counter = document.getelementbyid('counter');
counter.innertext = parseint(counter.innertext, 10) + 1;
}
draggable.addeventlistener('dragstart', ondragstart, false);
#draggable{
width: 100px;
height: 100px;
background: blue;
margin: 10px 5px;
}
#notdraggable{
width: 100px;
height: 100px;
background: red;
margin: 10px 5px;
}
#draggablendt{
width: 100px;
height: 100px;
background: green;
margin: 10px 5px;
}
<div>draggable (<span id='counter'>0</span>)</div>
<div id='draggable' draggable='true'></div>
<div><pre>draggable (no datatransfer)</div>
<div id='draggablendt' draggable></div>
<div><pre>not draggable</div>
<div id='notdraggable' draggable='false'></div>
score:0
you can checkout react-draggable library, just wrap component in draggable component
install
npm i react-draggable
import
import draggable from 'react-draggable'
usage:
<draggable
axis="both"
cancel="input, textarea, span, label"
>
<div style={mystyle}>test</div>
</draggable>
score:3
this can be a core implementation of the drag behaviour in react. it needs enhancements of course, plus does not handle dropping yet:
const { useref } = react
const app = () => {
const elemref = useref(null)
const dragprops = useref()
const initialisedrag = event => {
const { target, clientx, clienty } = event
const { offsettop, offsetleft } = target
const { left, top } = elemref.current.getboundingclientrect()
dragprops.current = {
dragstartleft: left - offsetleft,
dragstarttop: top - offsettop,
dragstartx: clientx,
dragstarty: clienty
}
window.addeventlistener('mousemove', startdragging, false)
window.addeventlistener('mouseup', stopdragging, false)
}
const startdragging = ({ clientx, clienty }) => {
elemref.current.style.transform = `translate(${dragprops.current.dragstartleft + clientx - dragprops.current.dragstartx}px, ${dragprops.current.dragstarttop + clienty - dragprops.current.dragstarty}px)`
}
const stopdragging = () => {
window.removeeventlistener('mousemove', startdragging, false)
window.removeeventlistener('mouseup', stopdragging, false)
}
return (
<div
onmousedown={initialisedrag}
ref={elemref}
>
dragme
</div>
)
}
reactdom.render(<app />, document.getelementbyid('root'));
div {
cursor: grab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Implementing a basic drag functionality in ReactJS
- How to use drag and drop functionality both columns and rows in my React Table - ReactJS
- Implementing Socket.io with ReactJS ES6
- Implementing Facebook comments plugin in ReactJS app
- How to hide ghost image in reactjs drag event?
- (CKEditor) Window is not defined ReactJS While Implementing
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- How to implement remember me functionality for authentication in ReactJS when i only receive jwt token from backend api
- Basic React Tests Failing after Implementing Redux
- reactjs - redux form and material ui framework -- with auto type - and clearing field functionality
- Search functionality in reactjs
- ReactJS hooks - drag and drop with multiple useState hooks and styled-components
- Fetch in ReactJS with Basic Auth return 401 (Unauthorized). Preflight request doesn't pass access control check
- What is causing Semantic-UI-React elements to break my basic Reactjs App?
- What is wrong with my basic ReactJS app?
- basic explain for what does npm start do with my reactjs code and how to run it from browser
- Canvas Freehand drawing Undo and Redo functionality in Reactjs
- Ace editor with ReactJS - undo functionality
- Implementing ReactJS into Angular App
- Axios basic authorization not going through in Reactjs
- Reactjs drag and drop
- Problem in implementing hardcoded Auth in Reactjs
- Implementing Spring Security in Sprint boot with ReactJS
- Implementing Lodash's debounce in a ReactJS functional component
- drag to reorder and save state with reactjs
- Providing external functionality to existing ReactJS components
- Implementing a 3D Tag Cloud in ReactJS
- How implementing a modal with reactjs
- How to combine onChange event for basic Validation Form in reactjs
- Custom component not getting rendered properly on this basic ReactJS app
More Query from same tag
- material-ui button with styled-components including react router Link
- Ignore and skip requirejs dependency
- How to refresh browser cache after publish React application?
- ReactJS: css transition not working in componentDidMount
- React - How to assign flow type to an exported module?
- react - is styling with use of method is a good practice
- React calls API every time user updates state and keeps old api alive
- Catching error messages from a NodeJS express application using axios
- How to include a wrapper element if there are items in a collection?
- Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
- Update a state property based on name
- How to change the value in an object when using useState
- How to prevent auto input value change with same name and same onchange function in reactJs?
- React: Expensive computation in useEffect blocking the rendering
- Making videojs progress bar in thicker in height
- How Can I get first element from API array
- Laravel PATCH Request doesn't read Axios form data
- prevent rerender for every setstate using react usestate hook
- Perform function and then also perform whatever is passed as prop, ReactJS
- Post Data With Redux and Fetch API with Axios Get Error Result so Looping Response Pending
- Static propTypes not working under ES6
- React router v4 dynamic parameter
- I am getting an Error: React.Children.only expected to receive a single React element child in my index.js page. Is there a workaround
- Why is this string comparison in Jest's expect not failing?
- How to extend TS interface for (MUI) React Component using styled-components?
- what is the right way to use forwardRef with withRouter
- Key press event in react with typescript
- React multi-page routing
- How I pass Parameters into Url with Get in Localhost with axios
- How to make a sticky footer in react?