Items disappear on drag

[CWSites]

I'm opening this issue because:

When I drag an item to any area inside or outside of the wrapper it disappears from the screen. There are no console errors. This may be related to #278 although I'm not on an Android device.

supporting information:

• I use sortable version: 0.9.2
• Google Chrome 66.0.3359.139
• macOS

How can the issue be reproduce the problem?

Click and drag any item, anywhere on the screen.

See screen recording here - https://www.dropbox.com/s/7i91kx4i9ercaww/html5sortable.mov?dl=0

My Code

import sortable from '../../../node_modules/html5sortable/dist/html5sortable.es.js';

sortable('.sortable', {
    forcePlaceholderSize: true,
    placeholderClass: 'sortable-placeholder',
    hoverClass: 'is-hovered'
});

<Row className="sortable">
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
  <Col lg={ 4 }>
    <Panel>...</Panel>
  </Col>
</Row>

[lukasoppermann]

Hey, I have no idea why. I would guess the item is removed because it loses its original parent and is dropped on an invalid target. But this is a wild guess. Can you maybe provide a live version so that it can be tested?

If you find any more infos that might be related, please add them here.

[CWSites]

It must be something to do with how I'm using it because I have the same configuration as my codepen (https://codepen.io/CWSites/pen/wjeNbb) and it doesn't have issues.

I'm doing this on a React App and I have other libraries involved as well but I'm not certain where the underlying issue is.

I sent you a collaborator invite to a private repo of my code. It's happening for me when I'm running it locally so you shouldn't have to worry about setting up a server to run the app.

[CWSites]

Hey @lukasoppermann, I updated my code base a bit and I'm unable to reproduce this. Feel free to close it out as an edge case.

[lukasoppermann]

Nice

[ammmir]

this seems to still be happening. on the examples page if you drag the first list item and drop it on the code block, it disappears. is there a way to disable this behavior?

[lukasoppermann]

Hey @ammmir, true I can replicate this as well.

This is a bug. Can you verify if this is new, aka did it change with one of the lastest updates?

[StudioVDS]

Hi, I also have this problem. For some reason, my items or not shifting as early as in your examples. I have to drag the mouse beyond the item for the placeholder to be placed at the new position, and if I drop the item at this position it all works like it should. But when I drop it above another item, the dragged item disappears. It, holds the display: none style it gets while dragging. I made a screen recording of this. https://www.dropbox.com/s/hdh3m9r48n7ch9j/html5sortable.mov?dl=0

I'm trying to reproduce it with your example file but with no luck till now. I'm mostly wondering why the items shift over at such a late moment. It might be something with using flex instead of float but I didn't find the problem yet unfortunately.

Update:
I created a simple Fiddle to test the difference between Float and Flex and it doesn't matter both give me the same result with the late shift. https://jsfiddle.net/studiovds/a6q9mtdo/show

I fixed this bug for now by removing the display: none when sorting has stopped.
sortable('.sortable-container')[0].addEventListener('sortstop', function(e) { $('.sortable-item').each(function(){ $(this).css('display',''); }); });

[jneb]

Can be reproduced trivially on Edge (Windows 10) if you just use the demo (from the docs directory). I take any item (first item of first list suffices), drag it far up, and poof! there it goes.
Indeed, no console messages apart from "sortstart" and "sortstop".
I'm really new to this library (Thanks Lukas!) so I don't dare trying to fix it yet. But at least I found that those three issues are probably one and the same.

[jneb]

I've been playing around and it appears that items disappear if and only if the items are dragged outside of the droppable area. I noticed that when the items disappear, the drop event hadn't occurred. Conversely, if the eventlistener on 'drop' is disabled, ALL items disappear. And serialisation shows that they're still there (but invisible).
So the fix should be that the cleanup code in the dragend makes the invisible element visible again.
I added the line
dragging.style.display = "";
in the eventlistener for dragend (htmlsortable.js:1071) and it appears to work.
The line comes from html5sortable.ts:424 (the same line number as the issue number? That must be a omen!)
But I don't pretend to have fixed it now.

[jneb]

Looking at the git blame my guess is than the following two lines have vanished due to #777:
dragging.style.display = dragging.oldDisplay delete dragging.oldDisplay
In html5soryable.ts:426 or so
This resulted in the dragged item vanishing from view because its style.display stays none.
So my fix is too simple, but I know I am close :-)

[chuoke]

Note:
This was fixed. But the latest version is not v0.13.1 from GitHub releases. You can use npm pack html5sortable to download the latest version (v0.13.3) from npm if you won't use npm install.