kutlugsahin / smooth-dnd Goto Github PK

I noticed a weird issue which I'm gonna try to describe in the following.

When user starts dragging in the middle of a card, everything seems fine:

Normal behavior

The issue

However, if I start dragging at the very left or right edge of a card suddenly the drop area is very off, see:

You can see that after entering the right half of the target area smooth-dnd suddenly doesn't recognise it any more. Also, if I keep moving further to the right the cards in the next lange already start moving even if I haven't entered the lane yet.

Any way to fix this?

Hi i'm trying to drop items from one container to another (using the same groupname and "copy" as behaviour)

However it fails:

I'd like to handle it my self since this "drag and drop" action will have to be done by a server-side method anyway. Thanks for this nice library!

I would like to build something like this (it's from notion)

But it seems that it's not possible at the moment with this library, right? I figured out two problems here:

1. Support for a drop indicator. Maybe there could be a class for all .smooth-dnd-draggable-wrapper items like .smooth-dnd-drop-before and .smooth-dnd-drop-after.

2. Support for leaving the dragged item on it's original position utils it's dropped anywhere

I saw this is planned but there is no opened issue related to it. So I'll leave this here.

Screen recording: https://cl.ly/0g1U0C3C1M42
Sandbox: https://codesandbox.io/s/github/yashok111/dnd

How to repeat: start dragging from the bottom list to the upper one and drop the item in between lists.

I have a project where I have not changed the global default of box-sizing from content-box. I noticed I started having layout issues when introducing smooth-dnd and it's the result of these overqualified CSS selectors that set the box model all child elements of .smooth-dnd-container and .smooth-dnd-ghost:

.smooth-dnd-container *{
  box-sizing: border-box;
}

/* ... */

.smooth-dnd-ghost *{
  box-sizing: border-box;
}

This means that elements nested deep within my draggable items will have their box sizing changed. This is very difficult to override, since I do set some elements to border-box when it makes sense for how I want a specific element to behave. I can override this default, but my override will again break the children where I want to use border-box.

While border-box is commonly used, it's not suitable for all situations and I think a library intended to deliver very specific functionality should not set overqualified defaults like this. Without knowing all the details of how calculations of the library works, I think the selectors should only target the specific elements where this box sizing matters for the library functionality.

Perhaps it could be changed to direct descendants only:

.smooth-dnd-container > * {
  box-sizing: border-box;
}

/* ... */

.smooth-dnd-ghost > * {
  box-sizing: border-box;
}

I'm using smooth-dnd via vue-smooth-dnd, as a workaround I wouldn't mind just duplicating the CSS file with custom changes myself but it seems the CSS is automatically loaded via NPM, so I guess this doesn't work as a workaround.

Good day,

found the following bug: I have a layout when one container has a set of child containers and draggables:

If I drag say Draggable2-1 from container 2 to container 1 slowly it works fine but if I flick the mouse (do it quickly) draggable will end up in both Container 1 and Root container (duplicate itself).

What I found: container.notifyParentOnPositionCapture({element}) method has a race condition. Because there are 2 containers inside the root container and assuming we are holding draggable above container 1:

• Container 1 will notify its parent with onChildPositionCaptured(true) method
• Container 2 after that will notify its parent with onChildPositionCaptured(false) method
  As a result parent ends up with posIsInChildContainer = false. oOf course sometimes container 2 might notify first and everything works fine.

I solved this problem with zero timeout trick:

function notifyParentOnPositionCapture({ element }) {
  let isCaptured = false;
  return ({ draggableInfo, dragResult }) => {
    if (getContainer(element).getParentContainer() && isCaptured !== (dragResult.pos !== null)) {
      isCaptured = dragResult.pos !== null;
      const parent = getContainer(element).getParentContainer();
      if (isCaptured === true) {
        setTimeout(() => {
          parent.onChildPositionCaptured(isCaptured);
        }, 0);
      } else {
        parent.onChildPositionCaptured(isCaptured);
      }
    }
  };
}

Hope that helps.

Best regards, Alex

smooth-dnd adds event listeners when the module is loaded. Functions like onMouseDown() can raise an exception if SmoothDnD() hasn't been called and you drag an element wrapped in <div class="smooth-dnd-draggable-wrapper"> because container will be undefined.

It might be better to only add the global event listeners the first time SmoothDnD() is called, or check container is set in onMouseDown()

I have to wrap my dnd elements because they are created dynamically and smooth-dnd doesn't support this as per my issue #10

Screen recording: https://cl.ly/1g02243y0l2t
It was recorded using React example for locked axes.

1. The main issue is that the gap where the item will be dropped has wrong position.
2. The second issue is that this gap is scrollable. As you can see in the attached recording, I can scroll the whole page by dragging the item on top of the gap. But I'm not sure about this one. :(

Posting this issue here as well as it seems to be related deeper to smooth-dnd rather than react-smooth-dnd.

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.

Seeing:

ERROR in node_modules/smooth-dnd/dist/src/interfaces.d.ts(122,13): error TS2304: Cannot find name 'ReturnType'.

It was working the other day on 0.8.6, but sometime started feeling. Tried upgrading and downgrading without success. Any idea what's going on here?

Can I use it in commercial software?

We are using ngx-smooth-dnd in our project and are running into a problem with the dependency on this library. Since this library uses a polyfill to set the constructor.prototype.matches clashes with jQuery's closest method (https://api.jquery.com/closest/). Once it reaches the #document element it tries to see if it has el.matches initiated it returns true, but the tries to perform el.matches('selector). Since matches does not work on Nodes this gives the following error: Uncaught TypeError: Cannot read property 'querySelectorAll' of null.

In our opinion this problem is easily resolved by removing Node from the constructor.prototype.matches polyfill:

(function (constructor: any) {
if (constructor && constructor.prototype && !constructor.prototype.matches) {
constructor.prototype.matches =
constructor.prototype.matchesSelector ||
constructor.prototype.mozMatchesSelector ||
constructor.prototype.msMatchesSelector ||
constructor.prototype.oMatchesSelector ||
constructor.prototype.webkitMatchesSelector ||
function (s: string) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) { }
return i > -1;
};
}
})(Node || Element);

as is already suggested in: #29

We are really enthousiastic about the library and we hope you can fix this for us!

It caused the #50.
The #67 is fixing it. But the touch-action: none doesn't prevent the panning somewhy.
Why don't we just prevent the touchmove instead of adding the smooth-dnd-disable-touch-action to the body?

function preventDefault(e: Event) {e.preventDefault();}
window.addEventListener('touchmove', preventDefault, { passive: false });

and after finish:

window.removeEventListener('touchmove', preventDefault);

In your demo I can see that there is support for vertical OR horizontal scrolling but not both. One scenario is a trello like board.

Would be really nice to see that feature!

Any possibility of a simple CDN version for vanilla JS users? Great functionality, but modules and frameworks aren't always the best approach when you want to knock up a simple demo.

We can select the container element during initialization. Is there any way that I can select which element is going to be the draggable wrapper.

The reason for asking this is because I'm trying to make the plugin work with table rows.
I can select the tbody as the container but after initialization the plugin inserts an additional div for the draggable element, after the tbody and before the tr element and the tables breaks, as expected.

Thanks for this great plugin.

Basically when dragging something that has canvas inside, the ghost clone has blank canvas; it would be great if you could copy the previous canvas into the cloned one so that the ghost works properly, hide this new functionality behind a flag.

https://github.com/kutlugsahin/smooth-dnd/blob/master/src/mediator.ts

line 88:   const ghost: HTMLElement = wrapperElement.cloneNode(true) as HTMLElement; 

The problem is that cloneNode doesn't copy content of canvas so cloned canvas is blank so need to do something like this following line 88.

if (copyFullCanvas) {
        let elements = ghost.querySelectorAll("canvas");
        if (elements.length) {
            let sourceCanvas = wrapperElement.querySelectorAll("canvas");
            elements.forEach((canvas, idx)=>{
                let destCtx = canvas.getContext('2d');
                destCtx.drawImage(sourceCanvas[idx], 0, 0);
            });
        }
}

I found hard to catch a bug with this library.
There is no information about how to reproduce it and I don't know steps. But we catch this type of error in Sentry every day.
This is information form Sentry:

{
  "tags": [
    [
      "browser",
      "Firefox 69.0"
    ],
    [
      "browser.name",
      "Firefox"
    ],
    [
      "environment",
      "production"
    ],
    [
      "handled",
      "yes"
    ],
    [
      "level",
      "error"
    ],
    [
      "mechanism",
      "instrument"
    ],
    [
      "os.name",
      "Windows 7"
    ]
  ],
  "contexts": {
    "os": {
      "type": "os",
      "name": "Windows 7"
    },
    "browser": {
      "version": "69.0",
      "type": "browser",
      "name": "Firefox"
    }
  },
  "culprit": "matches(smooth-dnd/dist/index)",
  "environment": "production",
  "errors": [
    {
      "url": "webpack:///./node_modules/@sentry/browser/esm/helpers.js",
      "type": "js_no_source"
    },
    {
      "url": "webpack:///./node_modules/smooth-dnd/dist/index.js",
      "type": "js_no_source"
    }
  ],
  "exception": {
    "values": [
      {
        "stacktrace": {
          "frames": [
            {
              "function": "i",
              "abs_path": "webpack:///./node_modules/@sentry/browser/esm/helpers.js",
              "module": "@sentry/browser/esm/helpers",
              "filename": "./node_modules/@sentry/browser/esm/helpers.js",
              "lineno": 70,
              "colno": 1,
              "in_app": false,
              "data": {
              }
            },
            {
              "function": "Ae",
              "abs_path": "webpack:///./node_modules/smooth-dnd/dist/index.js",
              "module": "smooth-dnd/dist/index",
              "filename": "./node_modules/smooth-dnd/dist/index.js",
              "lineno": 1,
              "colno": 15624,
              "in_app": false,
              "data": {
              }
            },
            {
              "function": "z",
              "abs_path": "webpack:///./node_modules/smooth-dnd/dist/index.js",
              "module": "smooth-dnd/dist/index",
              "filename": "./node_modules/smooth-dnd/dist/index.js",
              "lineno": 1,
              "colno": 3823,
              "in_app": false,
              "data": {
              }
            },
            {
              "function": "matches",
              "abs_path": "webpack:///./node_modules/smooth-dnd/dist/index.js",
              "module": "smooth-dnd/dist/index",
              "filename": "./node_modules/smooth-dnd/dist/index.js",
              "lineno": 1,
              "colno": 11014,
              "in_app": false,
              "data": {
              }
            }
          ]
        },
        "type": "TypeError",
        "raw_stacktrace": {
          "frames": [
            {
              "function": "i",
              "abs_path": "",
              "post_context": [
                "//# sourceMappingURL\u003dvendor-fb35cfde966335625cea.js.map"
              ],
              "filename": "/packs/vendor-fb35cfde966335625cea.js",
              "lineno": 1,
              "colno": 476879,
              "in_app": false,
              "context_line": "{snip} (t,n)});return t.handleEvent?t.handleEvent.apply(this,u):t.apply(this,u)}catch(e){throw l+\u003d1,setTimeout(function(){l-\u003d1}),Object(a.i)(functi {snip}"
            },
            {
              "function": "Se",
              "abs_path": "",
              "post_context": [
                "//# sourceMappingURL\u003dvendor-fb35cfde966335625cea.js.map"
              ],
              "filename": "/packs/vendor-fb35cfde966335625cea.js",
              "lineno": 1,
              "colno": 3015851,
              "in_app": false,
              "context_line": "{snip} var t\u003dYe(e);if(!me\u0026\u0026(void 0\u003d\u003d\u003dt.button||0\u003d\u003d\u003dt.button)\u0026\u0026(fe\u003dC(t.target,\".\"+i))){var n\u003dC(fe,\".\"+l),r\u003dpe.filter(function(e){return e.element\u003d\u003d\u003d {snip}"
            },
            {
              "function": "C",
              "abs_path": "",
              "post_context": [
                "//# sourceMappingURL\u003dvendor-fb35cfde966335625cea.js.map"
              ],
              "filename": "/packs/vendor-fb35cfde966335625cea.js",
              "lineno": 1,
              "colno": 3004127,
              "in_app": false,
              "context_line": "{snip} tElement}return null},C\u003dfunction(e,t){for(var n\u003de;n;){if(n.matches(t))return n;n\u003dn.parentElement}return null},A\u003dfunction(e,t){return-1\u003ce.cla {snip}"
            },
            {
              "function": "X.prototype.matches\u003c",
              "abs_path": "",
              "post_context": [
                "//# sourceMappingURL\u003dvendor-fb35cfde966335625cea.js.map"
              ],
              "filename": "/packs/vendor-fb35cfde966335625cea.js",
              "lineno": 1,
              "colno": 3011324,
              "in_app": false,
              "context_line": "{snip} |X.prototype.webkitMatchesSelector||function(e){for(var t\u003d(this.document||this.ownerDocument).querySelectorAll(e),n\u003dt.length;0\u003c\u003d--n\u0026\u0026t.item( {snip}"
            }
          ]
        },
        "value": "null has no properties",
        "mechanism": {
          "data": {
            "function": "addEventListener",
            "handler": "Se",
            "target": "EventTarget"
          },
          "type": "instrument",
          "handled": true
        }
      }
    ]
  },
  "extra": {
    "arguments": [
      "MouseEvent"
    ]
  },
  "fingerprint": [
    "{{ default }}"
  ],
  "grouping_config": {
    "enhancements": "eJybzDhxY05qemJypZWRgaGlroGxrqHRBABbEwcC",
    "id": "legacy:2019-03-12"
  },
  "hashes": [
    "f6342ec01059081053a1292d949524f3"
  ],
  "key_id": "695882",
  "level": "error",
  "location": "./node_modules/smooth-dnd/dist/index.js",
  "logger": "",
  "metadata": {
    "function": "matches",
    "type": "TypeError",
    "value": "null has no properties",
    "filename": "./node_modules/smooth-dnd/dist/index.js"
  },
  "received": 1568124219.951,
  "request": {
    "url": "",
    "headers": [
      [
        "User-Agent",
        "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0"
      ]
    ]
  },
  "sdk": {
    "version": "5.4.3",
    "name": "sentry.javascript.browser",
    "packages": [
      {
        "version": "5.4.3",
        "name": "npm:@sentry/browser"
      }
    ],
    "integrations": [
      "InboundFilters",
      "FunctionToString",
      "TryCatch",
      "Breadcrumbs",
      "GlobalHandlers",
      "LinkedErrors",
      "UserAgent"
    ]
  },
  "timestamp": 1568124219.951,
  "title": "TypeError: null has no properties",
  "type": "error",
  "user": {
    "ip_address": ""
  },
  "version": "7"
}

I'll try to investigate more info and steps on how to reproduce it. If I'll found something helpful I'll add it here.
More info:

• This is Firefox only bug (68+)
• This bug is independent of library components on the page.

Hi, @klaasman @johanneswilm @advantiss @joshuacoles
I m using vue-smooth-dnd with quasar (Vue framework).

https://codesandbox.io/s/vue-quasar-latest-working-czqjt

you can see code in codesandbox here. its working perfect in desktop but on touch device like mobile or table it hung there.

its giving error like:
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

working : with : 0.7.0 (vue-smooth-dnd) with dependency smooth dnd 0.11.0
not working: with : 0.8.0 (vue-smooth-dnd) with dependency smooth dnd 0.12.0
not working: with : 0.8.1 (vue-smooth-dnd) with dependency smooth dnd 0.12.1

All the examples, which are great by the way, use React and I am not a React person. Further my attempt at getting smooth-dnd to work in a plain JS app didn't get very far. The entire containerElement dragged.

It appears as though the React etc. libraries also include various CSS which isn't discussed in the docs. Also smooth-dnd inserts its own wrapper element, which isn't mentioned and can beak existing markup.

So is it possible to get a complete example or two in plain JS without using React, Vue etc.

Thanks.

I would like to know if it's possible to select and move more than one item at the same time.

Is that possible?

smooth-dnd cannot handle adding removing containers while dragging is in progress. reaction to visibility or size changes of any container while dragging is also needed.

• Possible use case:
  container in a popup menu becomes visible (or created) when menu opener is hovered by a draggable item.
• dispose fn of container can be called while drag is in progress. In such case remove the item from the disposed container if it is the source container if the dragged item, so that it can be added again if it's created (dynamic add) while dragging.

With the following markup:

<button class="button-flat ui-tab-menu-dropdown" title="Tab menu">
    <span class="icon-ellipsis-vertical"></span>
</button>

and

dragHandleSelector:  '.ui-tab-menu-dropdown'

SmoothDnd doesn't work correctly on Chrome and Edge because the onMouseDown(event) fires for the <span> element not the <button>.

The drag appears to start, but the drag ghost image doesn't move, instead you get an image the Browser creates, which does move. When you release the button the ghost image drags and another click drops it. This is on Chrome.

This doesn't happen on Firefox because the mousedown event fires on the button. This is an old bug in Firefox and here.

I did try to add a fix to onMouseDown() but couldn't get it to work.

I'm probably going to use the drop-outside functionality soon, but because of that, it's now not possible to "cancel" a drag by just releasing outside.

As such:

• the user either has to specifically drop the draggable back in a container
• the drop handler requires logic to modify the source array, or not

It would be really useful to have a way to programatically end the drag; this is done most usually via the escape key.

It seems that the native drag and drop respects the Escape key:

• https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

However Smooth DnD does not:

• https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

Anyway. For your consideration.

It seems like that the demo page don't support IE 9 and IE 10. Error reported in ie console is 'SCRIPT5009: “Set” is undefined'. Maybe, you should include babelpollyfill in this demo page, so that this demo page supports IE 9 and IE 10.

Can I use it in commercial software?

Hi Kutlu,

Great library - thanks for this and the Vue package also.

I was wondering if it was possible to fire the drop event early before the drop animation ends? - e.g. as soon as the user lets go of the item to drop it.

By that point we know the user's intent, so the animation is secondary.

I'm planning on using this in a live performance application and it would be nice to have the animation, but for the changes to the data Array to happen as soon as possible.

Cheers,
Sam

I have a use case where I need have the container and draggables in an iframe.

SmoothDnd constructor fails, probably because it relies on the document root:
Type Error: "Cannot read property 'children' of null".

It would be totally awesome if this could be made possible, maybe by allowing to pass the root window to use as an option to the constructor?

Here is the example:
https://codesandbox.io/s/0o8m7z98np

Here is the iframe (other sandbox):
https://codesandbox.io/s/v32k2w62y3

Thanks a lot,
Dan

Been loving this plugin ever since i've used it.
Just updated the plugin from 0.2.6 to 0.3.0 and the dragging issue appear.

May i know what the new update (0.3.0) is for? Does it change the css implementation? I'm a designer so i can't really understand the code behind it. :D

I'm refering to your demo for the https://kutlugsahin.github.io/vue-smooth-dnd/#/cards.

The parent of all the card-containers is card-scene. If you drag a column, you can drag it anywhere outside (even offscreen) this parent card-scene. While this doesn't do anything, it can break certain styles. An option that lets you set the container the draggables are restricted to would be great. See http://interactjs.io/#resizing for an example of what I mean.

Libraries
* Jest
* React Testing Library

Description
When I run the test for the component to uses smooth-dnd by itself. It works fine. However, when I run all my tests, I this illegal invocation error.

`Test suite failed to run

TypeError: Illegal invocation

  at Node.get [as childNodes] (node_modules/jsdom/lib/jsdom/living/generated/Node.js:423:13)
  at Node.get (node_modules/smooth-dnd/dist/index.js:1:11462)
  at node_modules/smooth-dnd/dist/index.js:1:11356
  at node_modules/smooth-dnd/dist/index.js:1:96
  at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:195)
  at node_modules/react-smooth-dnd/dist/index.js:1:145`

It seems that smooth-dnd calls jsdom and jsdom is throwing an exception. But it only happens when I run all my tests. When I run them individually, they work fine.

Any help would be appreciated.

Svelte is pretty awesome to work with - and stacks up as one of the fastest tools out there, if you haven't heard of it! A wrapper for Svelte would be awesome...

When the component is loaded and we start the drag for the first time it does not work and drop back to the same place, it starts working in the second drag can you please help resolving this issue.

Hey @kutlugsahin are you still there? I made a few pull requests about a month ago and have seen no reaction to them so far. If you are gone would you want to publish a forked version, @dylanmckendry?

If you place two lists vertically and try to move one item from the first list to the second list the ghost will remain in the first list. It will generate an empty gap between two lists. Check the video out to see how it looks.

https://cl.ly/3E2l3z3b043E

@kutlugsahin - thank you for maintaining this library and react-smooth-dnd.

Am running into an issue using react-smooth-dnd where CSS classes passed into dragClass do not acknowledge the cursor property.

I see that this property is comment out here.

Should we not be overriding the cursor property?

Is there any possibility to add support for scrict csp scenarios?
The insertion of the inline style element into the header (https://github.com/kutlugsahin/smooth-dnd/blob/master/src/styles.ts) enforces me to enable style-src 'unsafe-inline' in my csp definition.
I tried to add the hash value of this element to the csp but this solution does not work in Firefox and Edge. It would be great if it wouldn't be necessary to add unsafe-inline to my csp.

Hey. Thanks for the awesome library.

I have a requirement where I have to cancel drop based on what index the item is being dropped to.
A beforeDrop hook with same arguments as onDrop would fit seamlessly in the already awesome API.

Return value of beforeDrop hook will determine if drop will happen or not.

Hope you reply.

In a responsive Web app you may want to change the SmoothDND options on the fly to suite landscape vs portrait etc. Could you please add a function to do this - thanks.

Related to #6 which seemed to be resolved? Using vue-smooth-dnd: 0.2.3 but presumably this is in the core too?

Otherwise this is working great but I've observed a reproducible issue where if the containers are close together and the draggable is moved between two containers they duplicate:
https://cl.ly/0j211k023m47

Thanks for the work on the library, it's great!

Note: this is not reflected on the newest demo, it seems the demo is not on version 0.12.0.

But with the latest version, if you scroll horizontally THEN start dragging an element, the scroll position will be offset by the amount you just scrolled.

Seems to be introduced by this change here: 68853ec#diff-b2d63cc2307e321da31d0ed58f51717aR86

When you drag and drop an element, it always uses its center as its origin, rather than the mouse coordinates of the mousedown event.

Lib is amazing ... but Do u have clear n full code examples in plain html/javascript ... Doc is ok but there must be full complete code example too to make it easy to understand. Thankx

The demo page does not work in IE11.

Hello,

I have a following structure with nested containers:

    <div id="main" class="container">
        <div class="drag-item">Draggable main-1</div>
        <div class="drag-item">Draggable main-2</div>
        <div class="drag-item">Draggable main-3</div>

        <div id="c1" class="container">
            <div class="drag-item">Draggable c1-1</div>
            <div class="drag-item">Draggable c1-2</div>
            <div class="drag-item">Draggable c1-3</div>
        </div>
        
        <div  id="c2" class="container"> 
            <div class="drag-item">Draggable c3-1</div>
            <div class="drag-item">Draggable c3-2</div>
            <div class="drag-item">Draggable c3-3</div>
            <div class="drag-item">Draggable c3-1</div>
            <div class="drag-item">Draggable c3-2</div>                     
        </div>

        <div class="drag-item">Draggable main-4</div>
        <div class="drag-item">Draggable main-5</div>
        <div class="drag-item">Draggable main-6</div>
    </div>

If I start to drag div from c2 down to the "main" container evertyhing works fine, but when it's dragged up where "Draggable main-3" div is 'ghost' div all of a sudden shifts itself into down/right position. After debugging turns out that 'ghost' div has lost its 'fixed' property and position becomes relative to the "main" container.
From

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none

To fix this problem in mediator.js file there is a function:

function getGhostParent() {
  if (grabbedElement) {
    return grabbedElement.parentElement || global.document.body;
  } else {
    return global.document.body;
  }
}

Changing it to

function getGhostParent() {
    return global.document.body;
}

Solves the problem.

Let me know if you need a demo to replicate the bug, I will commit it into git repo.

Best regards,
Alex

Hey, I was playing with the React Cards example and I noticed the animationDuration property on DropPreviewOptions was typed as string where as on ContainerOptions is a number and its usages generally seem to be as a number. Is this a typo?

If so I am happy to PR to fix.

I get the following error when hiding/unhiding the container where the drag-handle is in and clicking the drag-handle:

I narrowed down the error, which happens when the Container receives classes that change, e.g. when adding/removing a class conditionally. As soon as the classList changes, the error gets thrown.

index.js?c878:formatted:785 Uncaught TypeError: Cannot read property 'getOptions' of undefined
    at HTMLDocument.De (index.js?c878:formatted:785)

I think it is this function:

I have a private repo that serves as a repro, I added you, @kutlugsahin, as a contributor to check the error.

Hello!

I have a trello-ish "task" system, and when I try to add "overflow-y: auto" on my "lane" to make it scroll independently (aka not with the whole page) - this breaks the functionality when you drag an individual card across the screen. It will not scroll the whole page if the card is over a lane towards the edge of the screen. Moving it out of the lane will scroll the page like normal.

Can provide more information/reproduction if it is needed. But any ideas if there is a work around for this? Or if this should work?