#8728 prototype #8730
#8728 prototype #8730
Conversation
| .calcite-sortable--drag { | ||
| .calcite-sortable--drag, | ||
| .calcite-sortable--fallback { | ||
| position: relative; |
There was a problem hiding this comment.
this part fixes the styling error for the dragging element.
| @@ -2,6 +2,8 @@ | |||
| @apply flex flex-col; | |||
| --calcite-list-item-icon-color: theme("colors.brand"); | |||
| --calcite-list-item-spacing-indent: theme("spacing.4"); | |||
| // uncomment this and it works with `forceFallback: true,` | |||
| // padding-block: 10px; | |||
There was a problem hiding this comment.
Introducing a padding between items seems to fix the dragging when fallback is enabled. Need to figure out why dragging on a web component isnt triggering elements to swap unless there is space between them. cc @jcfranco
| @@ -13,6 +13,7 @@ export const CSS = { | |||
| ghostClass: "calcite-sortable--ghost", | |||
| chosenClass: "calcite-sortable--chosen", | |||
| dragClass: "calcite-sortable--drag", | |||
| fallbackClass: "calcite-sortable--fallback", | |||
There was a problem hiding this comment.
Added fallback class css for usage if necessary.
|
@jcfranco I can get sortable working if I change the following: From: if (parent) {
do {
if (parent[expando]) {
let inserted;
inserted = parent[expando]._onDragOver({
clientX: touchEvt.clientX,To: if (parent) {
do {
// todo
const test = parent[expando] || dragEl.parentNode[expando];
if (test) {
var inserted = void 0;
inserted = test._onDragOver({
clientX: touchEvt.clientX, |
|
Thanks for working on this! ✨💪✨ Could we apply the fallback and extra padding only for mobile platforms (via userAgent)? We'd have to note this as a known issue for the time being. cc @ashetland @geospatialem I was not able to find any similar issue in SortableJS, so this might be an upstream issue that they would need to address. Could you submit an issue for this? Sharing your findings above would be helpful. |
Related Issue: #
Summary