danielstocks / react-sortable Goto Github PK
View Code? Open in Web Editor NEWA sortable list component built with React
License: MIT License
A sortable list component built with React
License: MIT License
Because sortable wraps the decorated component with a <div>
element, sortable cannot be used for table rows or list items. We've fixed this in our project by modifying react-sortable to render the decorated component directly as the root component with no containing element. This requires that the wrapped component be aware of and render the props generated by sortable. In our case, the wrapped component uses the object spread syntax to ensure all sortable-generated props are rendered.
<tr {...this.props} />
We're open to better alternatives, since I understand this pattern leads to new "unknown props" warnings in 0.15.2. https://facebook.github.io/react/warnings/unknown-prop.html
Any ideas?
cc @ryanswanson
When swapping the position of items in the array, the swapArrayElements function mutates the items array reference that is passed in via props. Before doing so, it should shallow clone the array to avoid mutating a prop.
cc @ryanswanson
I'm getting
SortableComposition.js?9396:57 Uncaught TypeError: Cannot read property 'array' of undefined at SortableComposition (SortableComposition.js?9396:57) at eval (sortableList.js?8a2a:26) at Object.<anonymous> (client.js:9597) at __webpack_require__ (client.js:670)
Hi,
In my implementation I'm always getting draggingIndex: null on : updateState={(value) => console.log("value", value)} when I drag div arround.
Am I doing something wrong? Even with the example I can't make it work ... :(
Thanks to anyone!
On the example, it looks like half of each item does not respond when an item is dragged over.
http://webcloud.se/react-sortable/
In the source, it calls isMouseBeyond, which seems to be the source of this behavior
export function isMouseBeyond(mousePos, elementPos, elementSize) { //TODO refactor for UP
var breakPoint = elementSize / 2; //break point is set to the middle line of element
var mouseOverlap = mousePos - elementPos;
return mouseOverlap > breakPoint;
}
it worked as expected and everything was droppable when breakPoint was just set to zero. I assume that the breakpoint is in there for a reason, but maybe we could at least add something to disable it with a prop? Wanted to get thoughts on best way to address that since there's already a TODO there. I'd be happy to send you a PR.
es6 doesnt support mixin concept
Since getDefaultProps()
is now called by React.createClass()
, and Sortable.getDefaultProps()
tries to access this
as if it was an element instance everything breaks miserably :(
Is there a stable branch of release? I would love to use this but the NPM version is unusable. And it looks like the master branch is in flux.
Go to your demo, then click and drag a file off your desk top and hover it over the demo block. You will notice that the blocks will rearrange as the module doesn't restrict drag events from external sources.
I have "overflow:auto" property on ul-list with long set of items. I tried to scroll list after I pressing mouse button to drag item but I can't! In this example http://webcloud.se/react-sortable/nested.html just set overflow: auto property and fixed height (for example 200px) and you can reproduce this bug in chrome.
Hi everybody.
We are using react-sortable in the admin UI of a project.
The client reports that tool is unusable in firefox (>=49.0.0 both win and linux). After sortEnd it always redirect the browser to about:blank.
I'm still looking at the code to determine the cause, but it is visible also on official demos here http://webcloud.se/react-sortable/
How to reproduce:
Strange thing is that if you try to drag an item outside the list (either as first or last element), sorting works well.
As soon as I find the problem (and if im able to fix it) I will fork and submit a merge request.
Cheers,
Stefano
My question is a simple one - is it possible to use only a certain child element as the drag handle? For example, only drag when an icon inside the draggable element is clicked?
I know I can set {draggable: false}
to disable it for all child elements, but is it then possible to re-enable it for a certain element?
An example can be seen from react-draggable
's demo page
http://mzabriskie.github.io/react-draggable/example/
The test for populateTreeIds is failing because it depends on a missing src/SortableNestedComposition
file. I'd like to submit a pull request to get the tests passing. Since populateTreeIds is not used by the current version of sortable, would you prefer that I remove populateTreeIds and the corresponding test, or just skip the test?
hi, i use the demo in my code, and i found one problem in Firefox, if i drag element by mouse, it will open a new tab in Firefox. how can i solve the problem? thanks~
I've been looking at react-sortable vs. react-dnd and I'm curious about the 'drop-zone' style behavior of simple sort in the react-dnd example (http://react-dnd.github.io/react-dnd/examples-sortable-simple.html) vs. the immediate reordering in the react-sortable example. Is it possible to get this drop-zone style behavior in react-sortable? When I click 'gold', for example, I want the div to follow my mouse, and a blank space to open up in the list at the place where the 'gold' item would be inserted on drop. Should I just use react-dnd for this?
Thanks!
I am trying to reuse one of the examples in the repo here, and I get an error over here: https://github.com/danielstocks/react-sortable/blob/master/demo/gridlist/SortableListItem.js#L6
Am I missing something? Should I be including the path to Sortable.js in my example? Or just require('react-sortable') ?
the index.js contains es6 code. Webpack does not seem to compile that down by default for npm modules. How to use this package?
sortable(ListItem)
...so folks don't confuse it with a regular component
<Sortable><ListItem/></Sortable>
Currently getting a warning about:
Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
A package update may be needed.
https://www.npmjs.com/package/react-sortable is showing version 0.0.2. Can you publish the 1.0.0 version?
CustomList.jsx
var React = require('react');
var SortableListItem = require('./CustomListItem.jsx');
var SortableList = React.createClass({
getInitialState: function () {
return {
draggingIndex: null,
data: this.props.data,
};
},
updateState: function (obj) {
if (_.isNull(obj.draggingIndex)) {
this.props.onReorder(this.state.data.objects);
}
this.setState(obj);
},
render: function () {
var listItems = this.state.data.objects.map(function (module, i) {
return (
<SortableListItem
key={i}
updateState={this.updateState}
items={this.state.data.objects}
activeItem={this.props.collection.meta.active}
draggingIndex={this.state.draggingIndex}
sortId={i}
outline="list"
module={module}
onEdit={this.props.onEdit}
onRemove={this.props.onRemove}
onPreview={this.props.onPreview}
onSetActive={this.props.onSetActive}
onUpdateTabName={this.props.onUpdateTabName}
/>
);
}, this);
return (
<div className='listing module-list'>
<ul className="list pull-up">
{listItems}
</ul>
</div>
);
},
});
module.exports = SortableList;
CustomListItem.jsx
var React = require('react');
var ModuleItem = require('../../../ModuleItem.jsx');
var Sortable = require('react-sortable').Sortable;
var SliderItem = React.createClass({
displayName: 'SortableListItem',
render: function () {
console.log('props', this.props);
return (
<div {...this.props} className="list-item">
<ModuleItem {...this.props.module} />
</div>
);
},
});
var SortableListItem = Sortable(SliderItem);
module.exports = SortableListItem;
When I log out props it has all the dragging methods that sortable provides
children:undefined
className:""
data-id:0
draggable:true
onDragEnd:()
onDragOver:()
onDragStart:()
onTouchEnd:()
onTouchMove:()
onTouchStart:()
But the props I passed in from CustomList component are missing. If I don't wrap it I will receive the correct props, which as an example would be:
activeItem:"56a6a1a4b45b9f7a6e836c81"
draggingIndex:\null
items:Array[3]
module:Object
onEdit:()
onPreview:()
onRemove:()
onSetActive:()
onUpdateTabName:()
outline:"list"
sortId:2
updateState:()
This was working at some point, but has regressed to this issue currently. I'm not if something changed in this package or if there is deeper underlying issue.
Any help is appreciated.
Cheers
Hi,
I'm trying to run the examples, I don't know what I'm doing wrong:
git clone [email protected]:danielstocks/react-sortable.git
cd react-sortable/example
npm install
npm start
I get an error:
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/carlos/Sites/react-sortable"
Haven't seen any activity here in a while, are you accepting pull requests?
I'm trying the demo, http://webcloud.se/react-sortable/, in Firefox and there is an issue in that after sorting the list the web browser navigates to another page. For example, dragging "Hotpink" around makes the browser navigate to http://www.hotpink.com/ (which is a porn site, by the way).
This is the user agent where I tested this:
Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0
This is the expected behaviour in Firefox (also in IE, so the issue is probably also present there) so in order to fix it you might need to implement the onDrag event and stop its propagation:
SortableComposition.js
...
handleDrop = (e) => {
e.preventDefault();
}
render() {
let newProps = Object.assign({}, this.props)
delete newProps.onSortItems
const { sortId, ...props } = newProps
return (
<Component
...
onDrop={this.handleDrop}
...
/>
)
Great module.
I didn't see anything about it being released under an open source license, though. Would the MIT license be suitable for your goals?
The module is currently not directly usable via webpack (possibly also not browserify) since the module does not export anything. Shimming works for now, but of course it adds complexity.
Not work in case of use with 'th', 'td', 'tr' tags, because 'div' can't be used inside of any 'table', 'tbody', 'tr' tags. So, when you wrap your component with <div className={this.isDragging() ? draggingClassName : ""}> it fail.
In dragOver, this.placement is always undefined and therefore will always return false.
I followed the instructions of the example implementation in https://github.com/danielstocks/react-sortable, I have the following warning in the Chrome console :
Warning: Unknown props `updateState`, `items`, `draggingIndex`, `sortId`, `outline`, `item`, `isDragging` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
React-sortable works great but I wondered if there is a way to avoid this warning?
Thanks !
Is there an option where I can say that a component cannot be dragged according to a piece of state? The documentation doesn't say anything and I am having trouble selecting text inside a sortable component.
This would be fantastic for certain views on mobile devices (i.e. the way you can reorder many UITableViews in iOS). Would it be possible to bind to touchstart
, touchmove
, etc as well as the mouse-dragging events?
Is it really necessary to call updateState while dragging, rather than simply at the end? If so can we get another method that is called once the drag is done? I'd rather not push the state back up the chain while the operation is in progress, this kicks off a flood of events.
I can't seem to get the displayName
set, so I'm seeing
<No display name></No display name>
in the DOM. I've tried in the constructor, after the class... nothing seems to work.
Would like to share some enhancements ideas about this:
If you're ok, I can fork and work on it ๐
Let's say there is a tree structure like this:
A
|--B
|--C
| |--D
It's not possible to move B
below C
(and its child D
) but still keep it the direct children of A.
Another case is that for D
, it's not possible to move it to the place which its parent is A
(same as B
, C
) and below C
Please check jQuery Nested Set as an example which all above mentioned things can be done
http://ilikenwf.github.io/example.html
Please release 1.2.1 as 1.2.0 does not work with react 16 beta.
Dragging below the fold selects content, and misplaces the mouse
Steps to reproduce
Create a list that is longer than the page
Drag an item below the bottom of the page
Notice how the page content is selected, and the mouse no longer is on the dragged item, and the dragged item has jumped up on the page
Expected behavior
The page scrolls when the item is dragged below the fold, and the mouse stays on the dragged item
I follow the Example Implementation in the README.md
the import {Sortable} from 'react-sortable' can't work
but try import Sortable from 'react-sortable' can work
Can't seem to figure this out for the life of me. Code looks like this
<Sortableist
data={SORTING_OPTIONS}
updateList={this.updateList}
/>
I tried using my chrome inspector to find where the CSS may be changing, but don't see anything noteworthy
Would be nice for us browserify users.
Thanks!
Hello,
Under 'Example Implementation' in the README, I believe the file to be required should be Sortable.jsx
instead of react-sortable.jsx
since there isn't a file named as the latter.
Thanks.
the isDragging className (displayname-dragging) gets overwritten when adding a custom className (either directly to item or through childProps)
Is there a way to disable drag behavior for certain children?
Just wondering if/when React 15 might be supported by your fine component? Thanks!
Since realese 1.2.0 i have following issue:
Uncaught TypeError: Sortable is not a function(โฆ)
my setup:
...
var Sortable = require('react-sortable').Sortable;
...
var SortableImageItem = Sortable(ImageItem); // <- chrome debugger error
In development section:
npm i webapck -g
webpack is misspelled.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.