@question: CSS disappears during Drag Preview

Sibi4 commented 2 years ago

I have this Slicklist:

<table>
 <SlickList
          lockAxis="y"
          value={this.products}
          onInput={this.handleSort}
          tag="tbody"
          appendTo="tbody"
        >
        {this.products.map((product: any, index: number) => {
              // @ts-ignore
              return (<SlickItem
                index={index} 
                id={index}  
                tag= "tr"
                key={`product-${index}`}
                class={classNames(
                      styles['product-table__entry']
                    )}   
                >
               <td style="width: 80px;">{product.name}</td> ////this doesn't apply when dragging
               <td style="width: 80px;">{product.price}</td> ////this doesn't apply when dragging
               )}
              </SlickItem>              
              );
            }
          )}
        </SlickList>
</table>

According to https://vue-slicksort.netlify.app/troubleshooting.html#items-re-render-after-sort I should add appendTo prop to the closest container where the style is applied. I have added it inside SlickList but style="width: 80px;" is not applied during Drag Preview. Only after finishing dragging, CSS applies correctly. Do you have any idea how can I solve this issue?

wudizaliangbing commented 1 year ago

Have you solved this problem? I have encountered similar problems

Sibi4 commented 1 year ago

Have you solved this problem? I have encountered similar problems

No I haven't.

Jexordexan commented 1 year ago

Please refer to this FAQ: https://github.com/Jexordexan/vue-slicksort#item-disappearing-when-sorting--css-issues. The css for the list item must either be global or applied as style, since the ghost is appended to the body to avoid clipping by parents with overflow: hidden. This is a technical constraint that cant be avoided, I hope you can find a solution.

Jexordexan / vue-slicksort

@question: CSS disappears during Drag Preview #171