Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support swap and multiDrag #203

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

LoTwT
Copy link

@LoTwT LoTwT commented Oct 15, 2024

description

This PR tries to resolve #201.

  • change the import source and add a shim
  • resolve data

Copy link

netlify bot commented Oct 15, 2024

Deploy Preview for vue-draggable-plus ready!

Name Link
🔨 Latest commit 9bd179c
🔍 Latest deploy log https://app.netlify.com/sites/vue-draggable-plus/deploys/67122d557e7d840009de98f2
😎 Deploy Preview https://deploy-preview-203--vue-draggable-plus.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@LoTwT LoTwT changed the title feat: mount internal plugins from sortablejs feat: support swap and multiDrag Oct 18, 2024
@Alfred-Skyblue
Copy link
Owner

Thank you for your PR. I previously encountered an issue during the multi-select cloning process. Could you add a case for multi-select cloning?

@LoTwT
Copy link
Author

LoTwT commented Oct 31, 2024

Thank you for your PR. I previously encountered an issue during the multi-select cloning process. Could you add a case for multi-select cloning?

From you, I think there will be many more cases that should be resolved after the swap and multiDrag are enabled, not only between multiDrag and clone.

Also, I would like to know why useDraggable operates on dom elements. I'm not sure about the effect of the dom operations. 😢

@Alfred-Skyblue
Copy link
Owner

In developing the multiDrag feature, I've encountered numerous issues, especially with the clone functionality. This has been a challenge I haven't yet overcome, which is why I haven't released the multiDrag feature.

Also, I would like to know why useDraggable operates on DOM elements. I'm not sure about the effect of the DOM operations. 😢

I didn't quite understand what you meant by this statement.

@LoTwT
Copy link
Author

LoTwT commented Nov 1, 2024

In developing the multiDrag feature, I've encountered numerous issues, especially with the clone functionality. This has been a challenge I haven't yet overcome, which is why I haven't released the multiDrag feature.

Also, I would like to know why useDraggable operates on DOM elements. I'm not sure about the effect of the DOM operations. 😢

I didn't quite understand what you meant by this statement.

呃,我英文太水了,还是用中文说吧。

我的意思是,当启用 swap 和 multiDrag 后,所有基础功能 + 这两个插件对应被启用的情况应该都需要考虑,会有很多复杂的情况,而不仅仅是 multiDrag + clone ...


第二个我没有表示清楚问题如下:

useDraggable 里有一些 DOM 操作,比如

currentNodes?.some((node, index) => {

先叠甲,我 sortablejs 用的很少,如果问题有冒犯,烦请见谅
我不是要讨论这行代码解决的问题,而是好奇为什么需要进行 DOM 操作,我会觉得对 sortablejs 进行封装,只要处理数据即可,为什么即要处理数据,又要处理 dom。

以上是原提问的意思。

在用中文重新梳理提问的时候,我突然觉得是不是因为当前写法,传入的 dataList 和 dom 结构在变化过程中不实时一一对应,所以才需要既处理 data 又处理 dom 呢?( 无意冒犯,是我真太菜没看懂 😢

@Alfred-Skyblue
Copy link
Owner

currentNodes?.some((node, index) => {

这里是处理了 #202 的问题,导致的如果拖拽回原位的情况下,会导致vnode错误

其他地方操作dom,比如:

removeNode(item)

此处是为了处理动画问题,因为动画是基于dom操作的

我的意思是,当启用 swap 和 multiDrag 后,所有基础功能 + 这两个插件对应被启用的情况应该都需要考虑,会有很多复杂的情况,而不仅仅是 multiDrag + clone

我当初在完成 multiDrag 功能的时候,处理了很多问题,在最后一个环节,我发现我使用 sortablejs 很难处理多个元素克隆的问题,当然单纯的克隆不是问题,问题是克隆过后带来的副作用,我暂时没有办法处理它,这也是我当时没有添加这个功能的原因

@LoTwT
Copy link
Author

LoTwT commented Nov 1, 2024

那我可以先自己尝试处理更多的 cases,看最终会不会碰到你之前碰到的问题。

@Alfred-Skyblue
Copy link
Owner

那我可以先自己尝试处理更多的 cases,看最终会不会碰到你之前碰到的问题。

好的,感谢您的努力

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feature request] support to use plugins powered by SortableJS
2 participants