feat: Support for dragging items between Lists #138

jdbence · 2017-02-05T08:45:29Z

Changed stories port to 8082 so it can be used online
Add stories for horizontal, vertical and grid lists
Add labels to storybook list items so they can be differentiated

…rent axis groups

oyeanuj · 2017-02-05T18:27:41Z

@jdbence This looks great! A couple of questions -

Do we need to distinguish between collection property and SortableGroup since I think the difference would be confusing?
I am trying to add the ability to be able to drop without sorting (like a drop-target). What changes can you anticipate that I would need to make in SortableGroup (assuming its merged)?

jdbence · 2017-02-05T21:52:12Z

@oyeanuj

You should not have to distinguish.
A prop will need to be passed and closestNodeIndex would need to return node.length. Everything else should be handled by the original classes.

alexshelkov · 2017-02-10T07:52:38Z

It is really interesting feature will it be merged soon?

clauderic · 2017-02-11T03:32:48Z

I've had the chance to test this PR out, and it does work fairly well 👍

Still need to carefully review the implementation though, I glanced quickly at it and had a few questions/suggestions for improvements. Stay tuned.

jakedowns · 2017-02-14T19:23:49Z

Thank you for posting this PR (and for the original HoC!), saved me a bunch of time!

here's a small tweak I had to make to this PR code for it to work better for my project.

i had to change the list.rect.center distance check, to use a list.rect closest edge formula

i think this is due to the fact that my lists had wildly different dimensions, and they're stacked vertically, rather than horizontally

https://gist.github.com/jakedowns/ed421ee3ee57af869fabb594531e6182

i'll try to post a public fork with all my mods if i get a chance to refactor and clean it up.

oyeanuj · 2017-02-14T21:23:21Z

@jakedowns Do you think it could be added to this PR with a prop like listArrangement: ('horizontal' or ('vertical')?

jdbence · 2017-02-14T21:31:00Z

@jakedowns Correct, different sized containers will need to check distance with closest edge instead of center. I will update this PR to use similar formula.

@oyeanuj We won't need to send a prop since detection will work in both scenarios.

jakedowns · 2017-02-14T22:31:39Z

@jdbence note: I had to update my gist, the overlap check was causing issues. nearest-edge check alone seems to suffice: https://gist.github.com/jakedowns/ed421ee3ee57af869fabb594531e6182/revisions

it has the nice added effect of making the list hopping happen based on cursor position, rather than the helper element's boundingClientRect. although, maybe that's a good case for something that could be a toggleable option via a prop.

jdbence · 2017-02-14T22:36:06Z

@jakedowns Yup, I'm only doing the closest edge check since overlap would return the first one found based on order not distance.

jdbence · 2017-02-15T00:40:32Z

@jakedowns Can you verify the fix works with your use case?

kalimantos · 2017-02-19T18:09:07Z

@jdbence great job, only a question: could SortableGroup be implemented using higher-order components like others?

jdbence · 2017-02-21T02:59:35Z

@kalimantos SortableGroup was not created with a HOC so the presentation can remain flexible. Mainly, lists can have the same or separate parents. Always open to suggestions if you have an example!

kalimantos · 2017-02-21T11:22:17Z

@jdbence yes you're right! i just made a test and it works great, but when i add the prop "useDragHandle" it brokes up after the handleMove is called. The error given to console is
Uncaught TypeError: Cannot read property 'dispatchEvent' of undefined and it happens because in that moment list.helper is not defined (SortableGroup/index.js:106)
How can i solve this?
(I also try using the 'useWindowAsScrollContainer' prop and sometimes has strange effects)

jdbence · 2017-02-22T05:17:59Z

@kalimantos Let me know if the latest changes fix your issue.

kalimantos · 2017-02-22T17:21:09Z

@jdbence thank you for the fast support, sadly it doesn't fix my problem, but i understand what you're doing. I think the problem is that closest look from the element to their parents. My handler is placed inside the item. So i've implemented a reversed closest so it should search for children

// utils.js
export function closestDescendant(el, fn) {
  // treat always as array also when is a single element
  el = [].concat(el);
  if(el.length === 0) return false;
  // find if at this level some element satisfy our 'fn'
  let found = el.find(fn);  
  if(found) return found;
  // search in all children
  let childList = [].concat.apply([], el.map(el => Array.from(el.childNodes)));
  return closestDescendant(childList, fn);
}

then use it in "startDragging" method instead of "closest"

// SortableGroup/index.js:99
let handle = closestDescendant(target.firstChild, (el) => el.sortableHandle);

and now works

jdbence · 2017-02-23T07:37:58Z

@kalimantos that's correct, searching descendants will work. Hopefully someone makes a PR so the SortableElement will have a ref to the handle.

kalimantos · 2017-02-23T07:40:59Z

@jdbence awesome, thanks a lot

alexcastillo · 2017-02-23T17:48:59Z

Great work, @jdbence!

@clauderic Any idea when this PR will be merged? We can't wait to use this feature.

harklee · 2017-03-03T03:42:55Z

Thanks for the great work, just tried out and it works flawlessly on a desktop. However, it does not seem to drop the item onto a different list in the "grid mode" on mobile. Can you confirm this? Again, thanks a lot for the great work, this is exactly what I've been looking for.

fairps · 2019-01-28T15:08:12Z

@nicubarbaros as far as I am aware the only way that react-beautiful-dnd supports this is by having multiple lists that sit side by side as columns... which does not solve my particular problem since my items can sometimes span multiple columns at once.

natew · 2019-02-04T18:57:43Z

react-beautiful-dnd doesn't support virtualization, and I had a lot more issues using it out of the box in terms of getting the styles to work.

It would be really nice to see this continue. @sbrichardson how is your branch working? @clauderic would you be open to a PR if it was redone and some people helped test and get it into shape?

snackycracky · 2019-03-04T11:30:15Z

since react-beautiful-dnd is not supporting wrapped lists I will use the closed pr here :/ atlassian/react-beautiful-dnd#316

geminiyellow · 2019-03-05T04:22:08Z

oh, no, pr and pr and pr, hope react-sortable-hoc can do all.

mismith · 2019-07-04T19:09:55Z

Too bad this still isn't supported, right? :(

denyo · 2019-07-08T15:03:44Z

I made it work today with two lists and without modifying the library by forwarding events from the source list to the target list. I will post some snippets tomorrow.

denyo · 2019-07-09T06:55:10Z

That's how it looks.

The component that controls both lists keeps track of their refs and provides the source list the ref of the target list.
Based on the conditions isDropZoneActive and isHoveringDropZoneTargetList the events of the source list are redirected.

<div
    onMouseEnter={() => this.setState({ isHoveringDropZoneTargetList: true })}
    onMouseLeave={() => this.setState({ isHoveringDropZoneTargetList: false })}
>
    <SkillList
        collection={1}
        skills={targetSkills}
        refList={this.refList1}
    />
>

<SkillList
    collection={2}
    skills={sourceSkills}
    dropSkill={this.dropSkill}
    onSortStartCallback={() => this.setState({ isDropZoneActive: true })}
    onSortEndCallback={() => this.setState({ isDropZoneActive: false })}
    // this is called once the dropzone is hit to trigger the drop and then forward the events from there on
    onSortMoveCallback={
        this.state.isHoveringDropZoneTargetList && this.state.isDropZoneActive
            ? () => this.setState({ isDropZoneActive: false })
            : undefined
    }
    mapEventsToOtherList={
        this.state.isHoveringDropZoneTargetList && !this.state.isDropZoneActive
    }
    refList={this.refList2}
    refOfOtherList={this.refList1}
/>

The crucial part of SkillList itself looks like:

<SortableList
    skills={skills}
    useDragHandle // important
    onSortStart={(sort: SortStart) => {
        setActiveSkill(skills[sort.index]); // local state
        if (onSortStartCallback) {
            onSortStartCallback(); // make drop zones visible
        }
    }}
    onSortEnd={(sort: SortEnd) => {
        if (updateSkillOrder) {
            updateSkillOrder(sort); // actual sorting
        }
        if (onSortEndCallback) {
            onSortEndCallback(); // disable drop zones
        }
        if (!mapEventsToOtherList && dropSkill) {
            dropSkill(activeSkill); // add skill to input component
        }
        setActiveSkill(undefined);
    }}
    onSortMove={(e) => {
        if (onSortMoveCallback && activeSkill) {
            dropSkill(activeSkill); // this removes the skill from the bottom list and adds it to the top list
            setActiveSkill(undefined);
            onSortMoveCallback(); // we hit the drop zone, time to make the overlay disappear

            // replace helper that is being dragged (optional)
            ReactDOM.render(
                <MuiThemeProvider theme={theme}>
                    <SkillItem skill={{ ...activeSkill, disabled: false }} {...props} />
                </MuiThemeProvider>,
                refList.current.helper
            );

            const skillNodes = refOfOtherList.current.container.children;
            const lastNodeIndex = skillNodes.length - 2;
            const lastNode = skillNodes[lastNodeIndex];
            refOfOtherList.current.manager.active = { collection: 1, index: lastNodeIndex };

            // set initial values on other list based on our last move event
            refOfOtherList.current.handlePress(e);

            // manipulate initial offset so that all following events are relative to our initial drop
            refOfOtherList.current.initialOffset = {
                x:
                    e['pageX'] -
                    e['offsetX'] +
                    lastNode.offsetLeft +
                    refList.current.initialOffset.x -
                    refList.current.helper.offsetLeft,
                // if you click the skill in the verticle middle, things should look quite nice
                // on the top or bottom edge, its a bit sketchy
                y: refOfOtherList.current.initialOffset.y - 15,
            };
        }

        if (mapEventsToOtherList && refOfOtherList) {
            refOfOtherList.current.handleMove(e); // forwarding drag events to top list happens here
            refOfOtherList.current.helper.style.opacity = 0; // hide the helper of the top list since we still use the one from the bottom
        }
    }}
    ref={refList}
    {...props}
/>

geminiyellow · 2019-07-10T02:36:06Z

wooo! @denyo thanks for your share, you are holy strong.

slrubinstein · 2019-09-10T14:43:49Z

I had a similar requirement. In my use case the top list was sortable when dragging from the top or bottom list. The bottom list was not sortable. I solved it by swapping the collection prop during updateBeforeSortStart, which "freezes" the bottom list. Posting a sandbox link in case it is useful to anyone else: https://codesandbox.io/embed/react-sortable-hoc-2-lists-5bmlq

bfeeley · 2019-11-08T12:26:31Z

What ever happened to this?

wlemahieu · 2019-12-05T17:46:33Z

What ever happened to this?

@bfeeley It seems like it was closed due to there being a couple of quality work-arounds provided by @denyo and @slrubinstein above.

gregoryforel · 2020-02-03T15:25:47Z

updateBeforeSortStart

That's great @slrubinstein ! Do you have the same example with the ability to drag n drop between both lists?

slrubinstein · 2020-02-03T18:43:49Z

@gregoryforel Hi, I don't, but I think if the two lists are part of the same collection you should be able to drag between them. Sorry I can't build it out right now.

gregoryforel · 2020-02-04T17:19:11Z

Thanks!

…

On Mon, 3 Feb 2020 at 19:43, Steve Rubinstein ***@***.***> wrote: @gregoryforel </~https://github.com/gregoryforel> Hi, I don't, but I think if the two lists are part of the same collection you should be able to drag between them. Sorry I can't build it out right now. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#138?email_source=notifications&email_token=ABDT6MSBKHATDJHBWDI24HTRBBQWVA5CNFSM4C65XYVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKU54WI#issuecomment-581557849>, or unsubscribe </~https://github.com/notifications/unsubscribe-auth/ABDT6MRU2Z5E3367SV4NWU3RBBQWVANCNFSM4C65XYVA> .

lochstar · 2020-02-18T22:22:59Z

Just in case anyone else is trying to find a solution, react-sortablejs works with dragging between multiple lists.

gregoryforel · 2020-02-18T23:35:56Z

thanks @lochstar ! Are there things that react-sortablejs can't do that react-sortable-hoc can?

ftruzzi · 2020-05-17T21:40:55Z

Hi! Would anyone here be able to provide a sample codepen using @denyo's approach? I tried implementing it a few weeks ago and failed. I kept using react-beautiful-dnd but I find myself wanting to switch again considering it also doesn't support centered lists.

I'm also wondering if this approach works with touches (on mobile) and if there's a way of "unlocking" the target list when the element starts entering it (instead of the mouse pointer as I think it is in the example gif).

Thanks!

Darcrandex · 2020-08-28T08:57:43Z

so what now, is there some demo?

tangdw · 2020-09-29T02:55:12Z

+1

iamhuynq · 2020-10-06T02:59:13Z

+1

barrychapman · 2020-10-15T04:24:29Z

+1

ronanmorris · 2020-10-28T13:26:47Z

+1

chaomao · 2020-11-30T16:15:59Z

why it is closed? I don't know react-sortable-hoc support it or not...

rashmimh · 2021-01-13T10:45:40Z

Do we have demo for this one? Thanks in advance.

rashmimh · 2021-01-24T08:11:15Z

That's how it looks.

The component that controls both lists keeps track of their refs and provides the source list the ref of the target list.
Based on the conditions isDropZoneActive and isHoveringDropZoneTargetList the events of the source list are redirected.

<div
    onMouseEnter={() => this.setState({ isHoveringDropZoneTargetList: true })}
    onMouseLeave={() => this.setState({ isHoveringDropZoneTargetList: false })}
>
    <SkillList
        collection={1}
        skills={targetSkills}
        refList={this.refList1}
    />
>

<SkillList
    collection={2}
    skills={sourceSkills}
    dropSkill={this.dropSkill}
    onSortStartCallback={() => this.setState({ isDropZoneActive: true })}
    onSortEndCallback={() => this.setState({ isDropZoneActive: false })}
    // this is called once the dropzone is hit to trigger the drop and then forward the events from there on
    onSortMoveCallback={
        this.state.isHoveringDropZoneTargetList && this.state.isDropZoneActive
            ? () => this.setState({ isDropZoneActive: false })
            : undefined
    }
    mapEventsToOtherList={
        this.state.isHoveringDropZoneTargetList && !this.state.isDropZoneActive
    }
    refList={this.refList2}
    refOfOtherList={this.refList1}
/>

The crucial part of SkillList itself looks like:

<SortableList
    skills={skills}
    useDragHandle // important
    onSortStart={(sort: SortStart) => {
        setActiveSkill(skills[sort.index]); // local state
        if (onSortStartCallback) {
            onSortStartCallback(); // make drop zones visible
        }
    }}
    onSortEnd={(sort: SortEnd) => {
        if (updateSkillOrder) {
            updateSkillOrder(sort); // actual sorting
        }
        if (onSortEndCallback) {
            onSortEndCallback(); // disable drop zones
        }
        if (!mapEventsToOtherList && dropSkill) {
            dropSkill(activeSkill); // add skill to input component
        }
        setActiveSkill(undefined);
    }}
    onSortMove={(e) => {
        if (onSortMoveCallback && activeSkill) {
            dropSkill(activeSkill); // this removes the skill from the bottom list and adds it to the top list
            setActiveSkill(undefined);
            onSortMoveCallback(); // we hit the drop zone, time to make the overlay disappear

            // replace helper that is being dragged (optional)
            ReactDOM.render(
                <MuiThemeProvider theme={theme}>
                    <SkillItem skill={{ ...activeSkill, disabled: false }} {...props} />
                </MuiThemeProvider>,
                refList.current.helper
            );

            const skillNodes = refOfOtherList.current.container.children;
            const lastNodeIndex = skillNodes.length - 2;
            const lastNode = skillNodes[lastNodeIndex];
            refOfOtherList.current.manager.active = { collection: 1, index: lastNodeIndex };

            // set initial values on other list based on our last move event
            refOfOtherList.current.handlePress(e);

            // manipulate initial offset so that all following events are relative to our initial drop
            refOfOtherList.current.initialOffset = {
                x:
                    e['pageX'] -
                    e['offsetX'] +
                    lastNode.offsetLeft +
                    refList.current.initialOffset.x -
                    refList.current.helper.offsetLeft,
                // if you click the skill in the verticle middle, things should look quite nice
                // on the top or bottom edge, its a bit sketchy
                y: refOfOtherList.current.initialOffset.y - 15,
            };
        }

        if (mapEventsToOtherList && refOfOtherList) {
            refOfOtherList.current.handleMove(e); // forwarding drag events to top list happens here
            refOfOtherList.current.helper.style.opacity = 0; // hide the helper of the top list since we still use the one from the bottom
        }
    }}
    ref={refList}
    {...props}
/>

Implementation looks great. Do we have sandbox link for this? I am asking this because I am looking for solution and not sure when this PR will be merged. I wanted to understand this as I have requirement to drag items from one list to another, two lists will be vertically side by side unlike yours. Thanks in advance.

Gordon-Feng · 2021-02-09T06:36:18Z

Based on the ideas provided by @denyo , I implemented this feature successfully! , here is the sandbox link: https://codesandbox.io/s/clever-neumann-gvqtv, hope it helps. CC: @rashmimh

jdbence added 2 commits February 5, 2017 08:37

feat: Allow items to be dragged between groups. Add stories for diffe…

5affe6e

…rent axis groups

fix: removed unused param

052699b

jdbence mentioned this pull request Feb 5, 2017

Connected lists #3

Open

jdbence added 2 commits February 5, 2017 08:58

fix: remove comment

125f227

chore: update vars

bb75f8d

chore: removed used variable

b360c26

clauderic mentioned this pull request Feb 9, 2017

Question #140

Closed

Robinfr mentioned this pull request Feb 13, 2017

Request: Nested Sortable #31

Closed

fix: use rect edge distance with closestList detection

ff7e050

fix: add handle support to SortableGroup and story example

b12046b

fix: search children for handle

3d761a0

anton164 mentioned this pull request Apr 4, 2019

Support for dragging between multiple lists #521

Open

sagar-gavhane mentioned this pull request Apr 5, 2020

Is it possible to drag from one list and drop into another? #679

Open

SilencerWeb mentioned this pull request May 18, 2020

Can i create multi-list system between two containers? #696

Open

rashmimh mentioned this pull request Jan 21, 2021

Multiple lists code example #397

Closed

feat: Support for dragging items between Lists #138

feat: Support for dragging items between Lists #138

Conversation

jdbence commented Feb 5, 2017 • edited Loading

oyeanuj commented Feb 5, 2017

jdbence commented Feb 5, 2017

alexshelkov commented Feb 10, 2017

clauderic commented Feb 11, 2017

jakedowns commented Feb 14, 2017 • edited Loading

oyeanuj commented Feb 14, 2017

jdbence commented Feb 14, 2017

jakedowns commented Feb 14, 2017 • edited Loading

jdbence commented Feb 14, 2017

jdbence commented Feb 15, 2017

kalimantos commented Feb 19, 2017 • edited Loading

jdbence commented Feb 21, 2017 • edited Loading

kalimantos commented Feb 21, 2017

jdbence commented Feb 22, 2017

kalimantos commented Feb 22, 2017

jdbence commented Feb 23, 2017

kalimantos commented Feb 23, 2017 • edited Loading

alexcastillo commented Feb 23, 2017

harklee commented Mar 3, 2017

fairps commented Jan 28, 2019

natew commented Feb 4, 2019

snackycracky commented Mar 4, 2019

geminiyellow commented Mar 5, 2019

mismith commented Jul 4, 2019

denyo commented Jul 8, 2019

denyo commented Jul 9, 2019

geminiyellow commented Jul 10, 2019

slrubinstein commented Sep 10, 2019 • edited Loading

bfeeley commented Nov 8, 2019

wlemahieu commented Dec 5, 2019

gregoryforel commented Feb 3, 2020

slrubinstein commented Feb 3, 2020

gregoryforel commented Feb 4, 2020 via email

lochstar commented Feb 18, 2020

gregoryforel commented Feb 18, 2020

ftruzzi commented May 17, 2020 • edited Loading

Darcrandex commented Aug 28, 2020

tangdw commented Sep 29, 2020

iamhuynq commented Oct 6, 2020

barrychapman commented Oct 15, 2020

ronanmorris commented Oct 28, 2020

chaomao commented Nov 30, 2020

rashmimh commented Jan 13, 2021

rashmimh commented Jan 24, 2021

Gordon-Feng commented Feb 9, 2021

jdbence commented Feb 5, 2017 •

edited

Loading

jakedowns commented Feb 14, 2017 •

edited

Loading

jakedowns commented Feb 14, 2017 •

edited

Loading

kalimantos commented Feb 19, 2017 •

edited

Loading

jdbence commented Feb 21, 2017 •

edited

Loading

kalimantos commented Feb 23, 2017 •

edited

Loading

slrubinstein commented Sep 10, 2019 •

edited

Loading

ftruzzi commented May 17, 2020 •

edited

Loading