React-sortable-hoc: Problem with rtl direction

[smmoosavi]

When I use rtl direction for container sort is not working correctly

demo: https://jsfiddle.net/eckfano0/2/
video: https://www.useloom.com/share/03959b86fb3447b39248a4ff4721e0f2

.item {
  cursor: move;
  padding: 8px;
  border: 1px solid red;
}

.container {
  display: flex;
  flex-direction: row;
  direction: rtl;
}

Is there any way to support rtl direction?

[sursolar]

+1

[tzachyrm]

+1

[Hazantip]

+1

[zanderisrael]

+1

[azat-dev]

+1

[mohsensaremi]

+1

[mohamad-n]

+1

[PersianArt]

Hi, I needed this option for my project, So I solve it for myself and create this PR.
But I was sure this would not be reviewed as fast as I expect or may not be accepted,
I put rtl version in npmjs.com to use it, it works completely fine, and works with latest version on that date.

https://www.npmjs.com/package/react-sortable-hoc-rtl

videos:
float based
flex based

I change and use this CSS code in this file https://github.com/PersianArt/react-sortable-hoc/blob/master/index.html

html, body, #root { width: 100%; height: 100%; direction: rtl; } body { background-color: #cdcdcd; display: table; color: #333; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, arial, sans-serif; margin: 0; } #root { display: table-cell; vertical-align: middle; } .sortable-container { padding: 0; width: 1200px; margin: 0 auto; display: block; overflow: hidden; white-space: nowrap; } .sortable-item { float: right; display: inline-block; list-style: none; width: calc(25% - 10px); height: 200px; margin: 5px; background-color: #fff; text-align: center; line-height: 200px; }

for flex only add these codes at end of .sortable-container
display: flex; flex-direction: row;

Hope this is useful.
If you want this option add to project,
Please ask the author to review this PR

[MasterMorsy]

@PersianArt thank you it's worked fine