search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.93k stars 1.09k forks source link

Preventing element from being added in a Sortable #524

Closed hnrq closed 2 years ago

hnrq commented 2 years ago

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

bug: Can't select one on the right sidebar, don't know why.

2. Describe the bug or feature

Hey guys, I'm trying to build a drag and drop that's controlled by state management using shopify/draggable and Solid.js. Here's what I thought: Adding data-id attributes to the containers, intercepting a sortable event, cancelling it and dispatching the move action. This would all work as expected, except that I can't prevent sortable:stop from adding the item as a children to the new container. Is there a way to do that? Also, is this the right approach? I think that I could also just let Draggable handle the DOM changes and keep the state in sync with them, but I'm not sure if that's the right thing to do as well. Any help appreciated

Please remember that with sample code it's easier to reproduce the bug and it's much faster to fix it.

4. Please tell us about your environment:

zjffun commented 2 years ago

I used to update the state (e.g.: items list array) when drag:stop or drag:stoppedand then draggable elements re-rendered because the state changed. The above approach doesn't need to prevent or cancel any event, but it is not performant because all draggable elements are re-rendered after sorted.

hnrq commented 2 years ago

I used to update the state (e.g.: items list array) when drag:stop or drag:stoppedand then draggable elements re-rendered because the state changed. The above approach doesn't need to prevent or cancel any event, but it is not performant because all draggable elements are re-rendered after sorted.

I'm trying to do something similar, but I'm currently getting two instances of the same item into the list (Probably happens because Solid does not re-render the container, but only appends a new instance). It would be really good if preventing the new node from being appended were possible.

zjffun commented 2 years ago

I also think it's good to prevent manipulate DOM, but no one has merged PR and released a new version recently for this project. There is another idea I found in react-sortablejs that revert nodes to pre-drag position then change React state.

  1. record where the node is when start dragging
  2. put it back after dragging
  3. remove redundant nodes
  4. update state
hnrq commented 2 years ago

Good idea! I might try and take a look into the lib, however, looks like there are lots of PRs waiting to be merged and no updates on master for a long time :/. That's a bummer, I might as well give dragula a try, seems like it has a similar API

hnrq commented 2 years ago

Okay, I gave up on Dragula because it is too slow on mobile. I'll figure out how to make that event cancellable