kutlugsahin / react-smooth-dnd Goto Github PK

in the onDrop function I need to know what is the container where I'm dropping my item, like in the shouldAcceptDrop function that provides the container groupName

Some D&D libraries, like React Sortable have virtualization features. Do you have plans to support rendering virtualization (React Virtualized) ?

Hi there,

Is it possible to drag element from parent to child and from child to parent?

For example:
Moving container 1 elements to container 2 or container 3 or container 4 in nested.

Is there a bug using the Context API? I have done an example in CodeSandBox: https://codesandbox.io/s/jz1j2row15

When moving the Draggable it starts mixing up things, even though they all have a key prop. Besides that, when using create-react-app and using the Context API, after moving around the Draggable it throws an error saying it can read the id of the element, which is being used by the key prop.

Quick question: Container component accepts style prop but not className. Is this for a reason or it just doesn't get passed?

Multi list typescript example (note I forked from someone else's example)
https://codesandbox.io/s/9jnomjoj8p

Hello,

Would it be possible to add a orientation in grid format, which is usually very used in website.
Horizontal and vertical are pretty limitating for modern design.

Best,
Thomas Chaton.

Hi,
How can i disable the default animation when passing over Container with a Draggable element?

Hello Kutlugsahin,

I have been using your library for simple case and it's really great !

Now i have a list of items horizontally but going to a new line when there's too many element.

The problem i'm meeting is that when i'm dragging items horizontally in the second row, it's taking the first row in reference and it doesn't take the good index nor position...

Is it a bug or am I not using the library correctly ? Or is it not implemented ?

In mobile, when dragging an item, the window scrolls before the item reaches the edge of the screen, and the elements jitter.

Example: https://github.com/brietsparks/rsd

This happens when using the library, but not in the demo app.

Is it possible to have a payload inserted that's different from the dragged item? Namely, copy drag from one list to another. I'd like to have one thing visible while copy dragging, but inserted something completely different.

I have to drag n drop 3-4 items with copy behaviour but couldn’t place the item at the bottom of the container.

It appears that whenever behaviour is set to drop-zone, if you drag an element from that container and cancel the drag, it flies off to the left of the container - this happens with every element in the list.

Looks as if perhaps they all think they're the first item in the list?

Has anyone encountered this before?

I have not been able to find the rights anywhere.

Good job. Regards!!

Hey @kutlugsahin ,

I was trying to add a placeholder feature to my editor but it seems not working in my code but it's working smoothly in cardboard & your provided URL: https://codesandbox.io/s/4xk3yl8247?fontsize=14
Added same properties in the code as shown in the document? Please help?

Hi
Is it possible to create per row double columns based form elements.

I saw the example https://kutlugsahin.github.io/smooth-dnd-demo/ - Form elements https://github.com/kutlugsahin/smooth-dnd-demo/blob/master/src/demo/pages/form.js
but its have one column each row. i would like to create two columns per row let me know is it possible to Customize using this library

How to get all item names(childrens) from each column or container

FORM Fields will return all its items => 5 FORM INPUTS
PDF Fields will return all its items => 5 PDF INPUTS

When I drag the element from copy behavior then dropped element should be HTML element and I have to change the content of each dropped elements and store updated content in an array of objects with drag n drop support?
Please reply?

When I have:

class WidgetDrawer extends React.Component {

  onDrop() {
     console.log('Dropped on drawer!')
  }

  render() {

    const items = [{ id: 1, name: 'Widget A'}, { id: 2, name: 'Widget B'}];

    return (
      <div>
        <Container onDrop={this.onDrop}>
          {items.map(item => {
            return (
              <Draggable key={item.id}>
                {item.name}
              </Draggable>
            );
          })}
        </Container>
            
        <Container style={{ backgroundColor: 'yellow', height: 100, width: 100 }} onDrop={() => console.log(5)}>

        </Container>
      </div>
    );
  }
}

export default WidgetDrawer;

and I drop an item from the first Container on the second, the console.log() is never triggered.

Any suggestions?

I'm on version 3.6 with React 16.2

Hi,

I'd like to have multiple containers, and I want to copy draggables from any container to any other container. I have set them all to the same groupName and behavior="copy", however then I can not drag from one to the other. Is this a bug?

Thanks
Max

I have a horizontal container that I'm trying to limit the number of objects it can contain to 4. When the container has 4 items, if I try to move an object out of the container, the card copies itself instead of move (even though the obj behaviour says "move"). The card only copies when there are 4 items. Behaviour is normal with 3 or less in the container.

shouldAcceptDrop(containerIndex, obj) {
console.log(obj);
let length = this.state.scene.card_container[containerIndex].cards.length;

if (length >= 4) {
return false;
} else {
return true;
}
}

the console log returns this:
animationDuration: 250
autoScrollEnabled: true
behaviour: "move"
children: (4) [{…}, {…}, {…}, {…}]
dragClass: "card-ghost"
dragHandleSelector: ".column-drag-handle"
getChildPayload: ƒ ()
groupName: "1"
onDrop: ƒ ()
orientation: "horizontal"
shouldAcceptDrop: ƒ ()
shouldAnimateDrop: null
proto: Object

export ES5 module and add module field in package.json, like this:

{
  "main": "./dist/index.js",
  "module": "./lib/index.js"
}

It will be much better for debug in development

Thank you for this library. It's very easy to get started and getting it working. Question I have though - if there is a way to highlight the drop area. For instance when moving a card from column to column - having be able to highlight the column when card is moved over it.

Hi, guys I need move draggable items among different containers. When i do it the property addedIndex in dropResult params of onDrop is null. How fix this. My code:

import React, {Component} from "react";
import {Container, Draggable} from "react-smooth-dnd";
import {applyDrag} from "./utils";
import _ from "lodash"

class Grid extends Component {
    state = {
        items: [
            {value: 1, order: 2000},
            {value: 2, order: 4000},
            {value: 3, order: 6000},
            {value: 4, order: 8000},
            {value: 5, order: 10000}]
    }

    onDrop = (dropResult) => {
        const {removedIndex, addedIndex, payload} = dropResult;
        const {items} = this.state;
        const index = addedIndex + (removedIndex > addedIndex ? -1 : 1);
        let orderResult = 0;
        if (!items[addedIndex] || !items[addedIndex]['order']) {
            orderResult = 2000;
        }
        if (index < 0) {
            orderResult = items[addedIndex]['order'] - 100;
        } else if (index >= items.length) {
            orderResult = items[addedIndex]['order'] + 100;
        } else {
            if (removedIndex > addedIndex) {
                orderResult = (items[addedIndex]['order'] + items[addedIndex - 1]['order']) / 2;
            } else {
                orderResult = (items[addedIndex + 1]['order'] + items[addedIndex]['order']) / 2;
            }
        }

        let newItems = items.slice(0);
        newItems[removedIndex]['order'] = orderResult;
        newItems = _.orderBy(newItems, ['order'], ['asc']);
        this.setState({items: newItems})
        return orderResult;
    }

    render() {
        const {items} = this.state;
        return <div>
            <Container
                groupName="milestone"
                getChildPayload={index => index}
                onDrop={this.onDrop}>
                {items.map(item => {
                    return <Draggable key={item.value}>
                        {item.value}
                    </Draggable>;
                })}
            </Container>
            <Container
                groupName="milestone"
                getChildPayload={index => index}
                onDrop={this.onDrop}>
                {items.map(item => {
                    return <Draggable key={item.value}>
                        {item.value}
                    </Draggable>;
                })}
            </Container>
        </div>;
    }


}

export default Grid;

Hello,

I've hit a condition where if I drag into another container of the same groupName, onDrop is called on two containers at once, which makes my app add the object to it. I have a video demo-ing the issue: https://cl.ly/6d371064c0e6

Did anyone ever hit this?

Thanks in advance,

• rafael

Hello @kutlugsahin, As I am utilizing this plugin in my current project but there is an error in IE as: "Object doesn't support property or method 'assign' & Unable to get property 'dispose' of undefined or null reference"
Even it is showing blank screen.
Thanks!

Thanks for this awesome library. The API is well-written and I am using it here: react-trello

I have one question about drag-n-drop to containers that are initially empty. When a draggable component is dropped in the container, a new wrapper is created with the following structure, but however the animated class is not added, so the container does not animate to create placeholder or move existing elements.

<div class="smooth-dnd-draggable-wrapper">
...
</div>

In the below illustration, the blocked lane is initially an empty container, note that when draggable cards are added to it, it does not animate:

Let me know If I am missing something! You can check the code in the repo too if needed.

I dont wanna move items into different columns but still can re-order item likka move item up and down in own column

Example :

1. FORM INPUT cannot move into PDF Fields
2. PDF INPUT cannot move into FORM Fields

My Source Code : index.js

I wanna know that how to do it ... Thankx

Is there a way to know the target container receiving the draggable? I mean, I have more than one container with the same groupName, is it possible to get the container when dropping the draggable

I am implementing React drag and drop using this library and I have one problem.
I have several containers in the app and I am going to prevent coming drag & drop(though I can move existing draggable into another container) if that container has more than 3 draggables inside. 🤔
It would be nice if I can solve this issue soon.
Thanks. 👍

@kutlugsahin I have two containers side by side with a width 50% as columns with the assigned array with drop accept but not able to drop properly in the container but if I move element vertically from bottom to top or top to bottom then I can drop in that container but if I move element from left to right over the row then not getting proper container area to drop.

Please refer below video link:
https://www.loom.com/share/2b7ce4a5e16e4793b8ddecbfe939c3d6

If you have a very long draggable element, it can be impossible to drop it into a container that is too high up on the page if the drag handle is at the top of the draggable element. It would be nice if there was an option to set how the position is calculated. I also welcome any other solutions you might suggest.

Hi guys. When I am try to import the libary I get this:

Could not find a declaration file for module 'react-smooth-dnd'.

Anyone could explain to me what problem is it and how to fix it? Thanks in advance

Is it possible to pass style attributes like dragStyle and dropStyle instead of css classnames to dragClass and dropClass. Since, we are generally moving away from packaging css or scss along with react component libraries and recommend css-in-js, would be greatly helpful to have such attributes.

I try to create dnd editor with react-smooth-dnd. I have 2 containers: first is toolbar with elements, second is editor. Each elemnt have following structure:

{
     id: shortid.generate(),
     type: 'TextElement',
     options: {
         text: 'Text',
         style: {
             padding: '10px 0 10px 15px'
         },
         isShowToolBar: false
      }
}

When I try to copy element from first container to the second I want to change id of the current element, but when I try to do it with onDrop callback I can only change id of each elements of both containers.

How can I change id only current element?

My first (toolbar) container is:

  <Container
      groupName="1"
      behaviour="copy"
      getChildPayload={i => this.state.items[i]}
  >
      {
        this.state.items.map((element,i) => {
           const component = createComponent(element, TYPE_TOOLBAR);
           return (
               <Draggable
                   key={i}
                   style={{display: 'inline-block', padding: '10px'}}
                  className="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12"
              >
                 {component}
              </Draggable>
            );
       })
     }
  </Container>

And my second container (editor):

<Container
    groupName="1"
    getChildPayload={i => this.state.items[i]}
    onDrop={e => this.setState({
        items: applyDrag(this.state.items, e)
    })}
    lockAxis="y"
    dragHandleSelector=".element-drag-handler"
>
    {
        this.state.items.map((element, i) => {
            const component = createComponent(
                element,
                TYPE_EDITOR,
                this.elementToolBarHandler
            );

            return (
                <Draggable key={i}>
                    {component}
                </Draggable>
            );
        })
    }
</Container>

I am trying to create a grid like swap feature.
Moving c -> a [a,b,c,d] result: [c,b,a,d]
Here what I hope to accomplish But it use html5 draggable.
https://codesandbox.io/s/github/bother7/my-homepage-app

Uncaught TypeError: t.getOptions.onDragStart is not a function
at S (index.js:1)
at index.js:1
at f (index.js:1)
at HTMLDocument.a (index.js:1)

Here is the code:

<Container
    onDrop={dropResult => this.child.current.moveChart(dropResult)}
    onDragStart={this.onDragStart}>
    <LayoutContentsComponent ref={this.child} selectedLayout={this.state.selectedLayout} 
</Container>

onDragStart = (index, payload) => {
    console.log(index, payload)
}

Set to horizontal, the elements will be lined up, the result I want is multi-line display
Manually changing the css style into multiple lines, but the drag is problematic

I'll admit I am not too well-versed in js but I believe react-smooth-dnd should have marked prop-types as a dependency on its own?

I had to manually add prop-types (and @types/prop-types) as a dependency to my package.json

If that is intentional then I'm sorry for bringing this up :)

Hello @kutlugsahin - thank you for maintaining this library.

Experiencing an issue with .smooth-dnd-container built from the <Container> component:

My code looks similar to:

<div className="outer" style={{ height: '74px'; padding: '12px' }}>
  <Container>
     ...
  </Container>
</div>

and the DOM output looks like (inline styles added):

<div class"outer" style="height: 74px; padding: 12px">
  <div class="smooth-dnd-container vertical" style="height: 0px"></div>
</div>

The resulting issue is that the outer container, despite having a height of 74px does not acknowledge droppable elements its bottom quarter.

Unsure if this is because .smooth-dnd-container is rendered with a height of 0px.

Droppable:

Non-Droppable:

Any advice would be appreciated. Thank you 👍

When there is image in Draggable, its performance is abnormal.
It first executes the browser's default drag image behavior，then after my mouse is released，and then move the mouse, the generated content next to the mouse is what I want

Hi @kutlugsahin, thank you for open-sourcing this - this looks great! Two quick questions -

1. Is the Grid layout supported for Drag/Drop (or atleast on a Flexbox in say 2 rows)?

2. I have a usecase where on drop, I'd like to distinguish between if the item was dropped between two items or on top of an item. So, I am wondering if you foresee the API supporting that, and/or boundaries within a target (that helps determine intent of drop - like middle 50% is considered dropping on the target)?

Hi,

When I have:

class MyCmp extends React.Component {
  render() {
    return (
      <div>
        <Container onDrop={() => console.log(1)}>
          {this.state.items.map(item => {
            return (
              <Draggable key={item.id}>
                {item.content}
              </Draggable>
            );
          })}
        </Container>
      </div>
    )
  }
}

I get the error:

Warning: Failed prop type: Invalid prop children of type object supplied to t, expected an array.

Do you have any suggestions?

Also, the console.log() in the onDrop prop is not triggered. What am I doing wrong?

I'm trying to have a behavior where I have multiple groups of draggable items, and dragging an item within a group reorders it, but dragging an item to a different group does a copy. For example, it seems like the Copy draggable example could be modified to have this behavior. Currently the behavior prop is a constant so I can't modify it based on the target drop zone.

Another semi-variant of this is to allow copy vs move to be toggled by the Alt key on a mac, similar to what react-dnd does here: http://react-dnd.github.io/react-dnd/examples-dustbin-copy-or-move.html

How can I add a className to Container component? Using className prop doesn't work.

The drag handle cursor style appears on hover, but when dragging, it changes back to the default arrow cursor. Example: https://kutlugsahin.github.io/smooth-dnd-demo/

We're getting a Uncaught TypeError: Illegal invocation error when using react-smooth-dnd with @loadable/component.

Specifically, we're trying to import a component that uses react-smooth-dnd dynamically. As the page loads, the error is thrown. The full stack trace is as below:

loadable.esm.js:269 Uncaught TypeError: Illegal invocation
    at Node.get (VM217 8.js:97747)
    at VM217 8.js:97747
    at VM217 8.js:97747
    at Object../node_modules/smooth-dnd/dist/index.js (VM217 8.js:97747)
    at __webpack_require__ (VM210 app.js:64)
    at VM217 8.js:89812
    at Object../node_modules/react-smooth-dnd/dist/index.js (VM217 8.js:89812)
    at __webpack_require__ (VM210 app.js:64)
    at Module../src/components/Sunspot/index.js (VM218 10.js:13301)
    at __webpack_require__ (VM210 app.js:64)

Googling on the issue seems to point towards a loss of context or an undefined global variable after webpack builds.

Has anyone faced similar issues? Any help would be much appreciated. We burned a weekend trying to solve this single issue.

Update: Wanted to add a note that the application works when running via webpack-dev-server directly, but throws the error above after webpack builds it.

Hey there,

Great library! Really enjoying using it.

One thing I am wondering: is it possible to remove the "shuffling" effect when dragging an item around in the list? In other words, when I drag Item A between Items B and C, I don't want Item B to move up to allocate space for Item A. I would rather it just stay put so I can simply show a highlighted line without actually affecting the placement of the list elements.

I know I can set animationDuration to null to remove the animations, but I would like to just have them not move at all when I'm dragging.

Is this currently possible, or is it something you are willing to consider adding as an extra prop? I could potentially put together a PR to enable this if it's something you would entertain.

Thanks again!
Gabe

Every time something is dragged and dropped, it console logs the positions and the div element.