danielstocks / react-sortable Goto Github PK

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 :(

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.

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.

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 !

In development section:

npm i webapck -g

webpack is misspelled.

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.

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!

the isDragging className (displayname-dragging) gets overwritten when adding a custom className (either directly to item or through childProps)

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.

Hi! Is it possible to change the default cursor:

I tried so many ways, both with js and css and couldn't get it to change. I'm using Chrome.

Thanks

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.

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

Would be nice for us browserify users.

Thanks!

es6 doesnt support mixin concept

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?

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/

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~

sortable(ListItem)

...so folks don't confuse it with a regular component

<Sortable><ListItem/></Sortable>

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

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') ?

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 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:

1. Go to http://webcloud.se/react-sortable/ with FF
2. reorder an item in the list
3. you are being redirected to about:blank

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

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'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"

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

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?

Please release 1.2.1 as 1.2.0 does not work with react 16 beta.

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}
          ...
        />
      )

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

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.

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.

Is there a way to disable drag behavior for certain children?

Would like to share some enhancements ideas about this:

1. Allow to add custom className to items
2. Don't sort while dragEnd didn't happened
3. Cancel sort on ESC key press

If you're ok, I can fork and work on it 😃

https://www.npmjs.com/package/react-sortable is showing version 0.0.2. Can you publish the 1.0.0 version?

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

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.

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!

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

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.

In dragOver, this.placement is always undefined and therefore will always return false.

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.

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.

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

the index.js contains es6 code. Webpack does not seem to compile that down by default for npm modules. How to use this package?

Just wondering if/when React 15 might be supported by your fine component? Thanks!

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