direction="vertical" on <Sortable> not working and <Sortable> in overflow:scroll buggy?

[myleschuahiock]

Hi Jason,

The direction="vertical" on my code doesn't seem to work in my code. However containment: true works, the only bug is when the parent container has a overflow: scroll.

Here's a simplified test case of how I'm implementing my code and also an "almost" carbon-copy code of your "vertical" demo.

App.js

import React from 'react';
import Sortable from 'react-anything-sortable';
import { sortable } from 'react-anything-sortable';

@sortable
class WidgetListItem extends React.Component {
    render() {
        return (
            <div {...this.props}>
                {this.props.children}
            </div>
        )
    }
}

export default class WidgetList extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    handleSort(data) {
        this.setState({
            result: data.join(' ')
        });
    }

    toggleCheckbox(evt) {
        console.log(evt)
    }

    render() {
        let items = [1,2,3,4,5,6,7,8,9,10]
        // TODO: move widget creation to its own component <WidgetItem/>
        const widgetItems = items.map(i => {
            return (
                <WidgetListItem className="vertical" sortData={i} key={i}>
                    Widget {i}
                </WidgetListItem>
            )
        })
        return <div>
                <h1>React Sortable Test</h1>
                <Sortable onSort={::this.handleSort} containment="true" className="vertical-container" direction="vertical">
                    {widgetItems}
                </Sortable>
        </div>
    }
}

/* pre-built style */
.ui-sortable {
  display: block;
  position: relative;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ui-sortable:before,
.ui-sortable:after{
  content: " ";
  display: table;
}

.ui-sortable:after{
  clear: both;
}

.ui-sortable .ui-sortable-item {
  float: left;
  cursor: move;
}

.ui-sortable .ui-sortable-item.ui-sortable-dragging {
  position: absolute;
  z-index: 1688;
}

.ui-sortable .ui-sortable-placeholder {
  display: none;
}

.ui-sortable .ui-sortable-placeholder.visible {
  display: block;
  z-index: -1;
}

/*custom*/
.vertical-container {
  width: 200px;
  padding: 10px;
  border: 1px #ccc solid;

  height:150px;
  overflow: scroll;
}

.vertical.ui-sortable-item {
  float: none;
  display: block;
  width: 100%;
  padding: 10px 5px;
  margin-bottom: 10px;
  border: 1px #eee solid;
}

It's weird that the direction="vertical" works for on your GitHub demo, but not on mine (maybe only doesn't work for me?)

[jasonslyvia]

By 'not working' do you mean the items cannot be dragged or cannot be dropped or both? is there any error in console? Which version of this library are you using?

I tried copying your css to the demo app and it works just fine.

[myleschuahiock]

I spent the past few hours trying to fix it, however, I finally got it to work. Not the way you would expect though.

When I copy-pasted the index.js, utils.js and SortableItemMixin.js into the same directory as my component and imported them as:

import Sortable, { sortable } from './'; 

My code finally allowed forced dragging and but the problem with the overflow was still not fixed.

However when I import Sortable, {sortable} from my node modules as: (which was installed through npm install --save react-anything-sortable)

import Sortable, { sortable } from 'react-anything-sortable' 

My code couldn't use force dragging and the overflow scroll css became glitchy.

I suggest you try replicating the problem by cloning your repo, installing 'react-anything-sortable' and changing the require('') to fetch from the node modules to see if the code works.

[jasonslyvia]

Interesting, I'll definitely give a try.

[myleschuahiock]

To give an idea of what I wanted to do with the sorting and scroll down, here's an animated gif of what it looks like when I define the height and add overflow-y:scroll

https://imgur.com/YWhf8pl

Does this behavior also happen to you?

[jasonslyvia]

I believe it's the correct behaviour now because IIRC I didn't deal with scrolling situation particularly 😅 But it should be fixed.

[myleschuahiock]

Okay thanks for the clarification! I'll keep my eye on this! :smiley:

[prodhan29]

i am facing this problem as well. it is not user friendly when i am scrolling an item from top to bottom or vice versa. please fix it up ASAP.

[jasonslyvia]

Sorry guys, kinda busy this week, I'll try to solve this during this weekend.

[prodhan29]

I am using this library in my project. Project will live in next month. So it will be helpful if you fix this problem as early as possible. Thanks in advance

[erasmo-marin]

Hi!

I have this problem too, here an example of the problem:

https://www.youtube.com/watch?v=RP1R8q2eiEY

It would be great if you can fix it or someone can help you with this.