New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[CARBON-865] CustomDragLayer component for enabling Drag & Drop ghost row #1439
Commits on Aug 21, 2017
-
CustomDragLayer component for enabling Drag & Drop ghost row
In order to enable this you need to define the `draggableNode` prop on the `<WithDrag>` component. For example: ``` class DraggableItems extends React.Component { render() { return ( <DraggableContext onDrag={ onItemMoved }> <ol> { items.map((item, index) => { return ( <WithDrop key={ index } index={ index }> <DraggableItem /> </WithDrop> ); }); } </ol> </DraggableContext> ); } } ... class DraggableItem extends React.Component { render() { return ( <li ref={ (node) => { this._listItem = node; } } > <WithDrag draggableNode={ () => { return this._listItem; } }> <span>{ item.content }</span> </WithDrag> </li> ); } } ``` Note that the `draggableNode` is passed as a function because the ref `_listItem` is undefined until the component is mounted.
Paul Sturgess committedAug 21, 2017 Configuration menu - View commit details
-
Copy full SHA for 19b052b - Browse repository at this point
Copy the full SHA 19b052bView commit details
Commits on Aug 22, 2017
-
Configuration menu - View commit details
-
Copy full SHA for 791f069 - Browse repository at this point
Copy the full SHA 791f069View commit details -
1
Configuration menu - View commit details
-
Copy full SHA for 3cd91b5 - Browse repository at this point
Copy the full SHA 3cd91b5View commit details -
Configuration menu - View commit details
-
Copy full SHA for 9623bf7 - Browse repository at this point
Copy the full SHA 9623bf7View commit details
Commits on Aug 24, 2017
-
CustomDragLayer component for enabling Drag & Drop ghost row
In order to enable this you need to define the `draggableNode` prop on the `<WithDrag>` component. For example: ``` class DraggableItems extends React.Component { render() { return ( <DraggableContext onDrag={ onItemMoved }> <ol> { items.map((item, index) => { return ( <WithDrop key={ index } index={ index }> <DraggableItem /> </WithDrop> ); }); } </ol> </DraggableContext> ); } } ... class DraggableItem extends React.Component { render() { return ( <li ref={ (node) => { this._listItem = node; } } > <WithDrag draggableNode={ () => { return this._listItem; } }> <span>{ item.content }</span> </WithDrag> </li> ); } } ``` Note that the `draggableNode` is passed as a function because the ref `_listItem` is undefined until the component is mounted.
Paul Sturgess committedAug 24, 2017 Configuration menu - View commit details
-
Copy full SHA for 1b36110 - Browse repository at this point
Copy the full SHA 1b36110View commit details -
Configuration menu - View commit details
-
Copy full SHA for 7eb9e54 - Browse repository at this point
Copy the full SHA 7eb9e54View commit details -
Prevent Safari from changing the mouse cursor on drag
Use 'selectstart' event listener to call preventDefault if the user is dragging a dom node or is already dragging.
Paul Sturgess committedAug 24, 2017 Configuration menu - View commit details
-
Copy full SHA for aeed752 - Browse repository at this point
Copy the full SHA aeed752View commit details
Commits on Aug 25, 2017
-
Configuration menu - View commit details
-
Copy full SHA for ab8187e - Browse repository at this point
Copy the full SHA ab8187eView commit details -
Configuration menu - View commit details
-
Copy full SHA for b2dba8b - Browse repository at this point
Copy the full SHA b2dba8bView commit details
Commits on Aug 29, 2017
-
Merge pull request #1494 from Sage/CARBON-865-safari-fix
Fix Safari cursor for drag and drop
Configuration menu - View commit details
-
Copy full SHA for f33a17f - Browse repository at this point
Copy the full SHA f33a17fView commit details