Integrate MultiDrag plugin.

[divinespear]

I got some work... releated #104, #536, #649 🚀

• Example included.
• Unit test not written.
• With my bad english, you should update README with good language.

[David-Desmaisons]

Thanks for this.
As expected this is pretty huge.
I will need time to review/refactor it and provide the unit testings.

[Flip535]

I found an issue. Multi Drag doesn't seem to work when dragging multiple items from one list to another. The problem seems to be with onDragAddList and onDragRemoveList when they call this.spliceList. spliceList modifies this.value and emits the change but this.value stays exactly the same until the next tick.

[Flip535]

I created a pull request on @divinespear 's fork with a proposed fix.

[TimoZikeli]

Thanks @Flip535 for the fix. However, when multi-dragging objects from one list to another, there is still sometimes an error:

Interestingly, it happens when you select more than half of a list's items at once and drag it. If it's <= list.length/2, it works...

[Flip535]

Im not able to reproduce that. There may be something special about your use case. Can you provide an example?

[TimoZikeli]

@Flip535
Ok, so this is my code:

                <draggable v-for="(item, index) in images"
                           v-model="images[index]"
                           group="image"
                           animation="150"
                           selected-class="sortableSelected"
                           ghost-class="imageGhost"
                           @change="imagesChanged"
                           tag="v-layout"
                           class="sortableRow imageContainer"
                           :component-data="{row: true}"
                           :force-fallback="true"
                           multi-drag
                >

                    <v-flex v-for="image in item" class="droppableImage" :key="image.path">
                        <img :src="getImageUrl(image.url + '&size=SMALL')">
                    </v-flex>
                </draggable>

Have a look at helper.js:32. That's where the error occurs. Suppose I have one list with 4 items. I drag 3 of them to another list. The argument fatherNode in the helper function is equal to this.rootContainer in vuedraggable.js:513 which is equal to the HTML container of the original list where the item should be removed from.. position in the helper function is 4, so position - 1 is 3. However, there is only one element left in fatherNode.children, so an array out of bounds error is thrown. I am not sure what the reason for that is. Either the fatherNode should be a different one (maybe the new list the items should be added to?) or the HTML elements are deleted too early.

[Flip535]

I think i may have the fix for that. Try this out and let me know if it works:
https://codepen.io/Flip535/pen/jOOKBZj

[TimoZikeli]

@Flip535 Great, I pulled your fork and it works now! Thanks!

[zherman91]

Any updates on if multi-drag is operational yet? Let me know if you can!

Thanks!

[Flip535]

I am currently using the fork in production. It seems to be working well for our use case.

[David-Desmaisons]

@zherman91 I will begin the review this week-end. This may take time as I will need to add missing tests and validate all these impacting changes.

[zherman91]

@David-Desmaisons - Thanks for the update! Can't wait for that functionality so let me know when you can. I really appreciate your time!

Thanks.

[Tulipyuyu]

hello，你好！
我在本地写了一个和您这一模一样的例子，但是依旧没能实现多拖拽，请问我是哪里写的有问题吗？

[divinespear]

@Tulipyuyu It's based on SortableJS, and it has good MultiDrag plugin.
First and most important problem is mounting MultiDrag plugin and keep it singleton.
After that, all problems are solved with SortableJS documents. 😃

[Guobacai]

Hi @David-Desmaisons : Do you have any idea which version is going to include this feature?

[divinespear]

@SerhiyRomanov that looks not normal case.
is it allowed by native sortable.js and multidrag plugin?

[SerhiyRomanov]

@divinespear Yes, you are right, seems like this is not allowed behaviour.
Based on this official example https://jsbin.com/wopavom/edit?js,output I assume, that users should be not able to select items from different lists at the same moment. Try to select Item1 from both lists at the same time - you won't be able to this.
So, the current library for Vue should repeat the same logic, then the bug, which I describe above, simply won't happen.

[vladstarikov88]

Is this MR ready?

[kaiserkoenig]

Can't wait to see this official

[TimoZikeli]

I'm having trouble accessing the MultiDrag.singleton instance.

I'm creating components like this:

<draggable v-for="(item, index) in images"
                  ...
                   :force-fallback="true"
                   :multi-drag="true">

They are working fine, MultiDrag is possible. However, when I want to select items programmatically, that's not possible because MultiDrag.singleton is undefined:

import draggable from "vuedraggable";
import { MultiDrag } from "sortablejs";

MultiDrag.singleton // singleton is undefined, calling long after the components have been initialized

Is that a problem on my side? I am using the latest commit of the fork, everything else is working fine. When adding debugging output in vuedraggable.js, I see that MultiDrag.singleton is set! However, when trying to access it from my Vue component, it is undefined:

"TypeError: undefined is not an object (evaluating 'sortablejs__WEBPACK_IMPORTED_MODULE_21__["MultiDrag"].singleton.utils')"

Maybe a different instance of sortablejs is used?

Thanks for your help!

[abusedmedia]

@TimoZikeli I've made a quick test, creating a new Vue app and adding this fork as dep, this code in App.vue works as expected:

<template>
  <div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { MultiDrag } from 'sortablejs'

export default {
    mounted(){
      console.log(MultiDrag.singleton.utils)
    }
}
</script>

[TimoZikeli]

@TimoZikeli I've made a quick test, creating a new Vue app and adding this fork as dep, this code in App.vue works as expected:

<template>
  <div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { MultiDrag } from 'sortablejs'

export default {
    mounted(){
      console.log(MultiDrag.singleton.utils)
    }
}
</script>

Thanks! That's very strange... I added debugging output in vuedraggable.js and MultiDrag.singleton is set, but when I try to access it afterwards in mounted() like you do, it is undefined... Could you maybe post your package.json so I can check the dependencies? Thanks :)

[abusedmedia]

Here the package.json:

{
  "name": "test-vue-multidrag",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuedraggable": "git+https://github.com/divinespear/Vue.Draggable.git"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

[TimoZikeli]

Here the package.json:

{
  "name": "test-vue-multidrag",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuedraggable": "git+https://github.com/divinespear/Vue.Draggable.git"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

Thank you, I deleted the node_modules directory and installed the modules again, now it's working 💯

[stemyke]

@divinespear Can you please check my problem again? Now here is the test repo as requesed:

https://github.com/stemyke/vue-multidrag-test

Unfortunately you have to do a lot of dragging to reproduce the problem. Plesae be aware that there is a timeout which reselects the previously selected rows after dragging, so you need to wait 500ms after each drag. Usuall I test it with 3 selected rows. You can only select the rows with the checkboxes and you can drag them with he "[X]" placeholder. Thanks in advance!

[bkyf]

Hi @David-Desmaisons , is there maybe a time-frame for when this may be merged to the master branch and be released as part of vue-draggable?

[David-Desmaisons]

@bkyf I am currently working on porting the lib to vue 3.
I will definitivelly work on integrating this feature on the vue 3 version of vue-draggable.

Regarding this feature for version 2, it may be an option if it can be backported without major changes

[jetlej]

+1

[YoungL1107]

any update?

[Tulipyuyu]

thanks!

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "Jean-Jacques-Nuoan"<notifications@github.com&gt;; 发送时间: 2021年2月18日(星期四) 晚上6:13 收件人: "SortableJS/Vue.Draggable"<Vue.Draggable@noreply.github.com&gt;; 抄送: "Y☆♧U"<1048037636@qq.com&gt;; "Mention"<mention@noreply.github.com&gt;; 主题: Re: [SortableJS/Vue.Draggable] Integrate MultiDrag plugin. (#744) @divinespear请你再检查一下我的问题好吗？现在这是我要求的测试报告： https://github.com/stemyke/vue-multidrag-test 不幸的是，您必须做大量的拖动来重现问题。请注意，有一个超时，重新选择以前选定的行后拖动，所以您需要等待500毫秒后，每拖动。通常我用3个选定的行测试它。您只能选择带有复选框的行，并且可以用“[X]”占位符拖动它们。先谢谢了！ @stemyke我使用的是你的vuedraggable依赖版本，这是写在package.json。完全有效！然而，当我拖放不连续的内容，它不能很好地工作。调试后发现multidrag插件中的一些代码不能达到我想要的效果，下面是dispatchupdate事件的截图和代码你能帮我解决这个问题吗？谢啦！ //如果初始折叠完成，元素可能已经改变了位置，因为它们现在//在dragEl周围展开，即使dragEl可能没有更改他的索引，所以更新事件//必须在这里被解雇，因为Sortable不会。如果(OldIndex===指数(龙)){让更新=假;多灾多难.For每(多重网格=&gt;{如果(多重网格.舒适指数!==指数(多重网格)){更新=真实的;返回;}});如果(更新){DispatchSorableEvent(“已更新”);}}} 下面是索引方法： /***返回元素在其父元素中的索引，用于选定的*元素*@param{HTML元素{耳}*@param{选择器{选择器*@return{数字}*/功能指数(埃尔,选择器){让指数=0;如果(!埃尔||!埃尔.父节点){返回-1;}/*张鑫老板：真*/正在…(埃尔=埃尔.上一元素){如果((埃尔.节点名.升级版()!==“时间”)&amp;&amp;埃尔!==可分类的.克隆&amp;&amp;(!选择器||火柴(埃尔,选择器))){指数++;}}返回指数;} 我认为sortableIndex变量与这个index方法的返回不匹配。用这种方法来确定是不合适的。 我发现这种版本的vuedragable可能不适合从一个列表多拖动到另一个，只适合从同一个列表的多拖动 — 你收到这个是因为你被提到了。 直接回复此邮件，在GitHub上查看，或取消订阅.

[aranoe]

Any Update? When will multi drag be possible?

[bkhatkov]

Hi guys,
Is there any chance to have this merged?
That is so hard to look for good alternatives

[edvinkuric]

Hey @divinespear, i really appreciate this work, thank you very much :-)

@David-Desmaisons Thank you very much for your support :-)
Is there any Roadmap/Deadline/ETA, when this feature will be merged into master? I see it only as beneficial to support this feature - my tests show that the Multidrag would work quite well within the same list (which is exactly what i need).

Is something missing for this merge?

[David-Desmaisons]

@edvinkuric I have two main concerns with this PR (beside the lack of time on my side):
1- There is no added unit tests to cover the added functionality
2- The whole component is affected by the changes

Point 1 means that at least to merge the PR, I have to deep dive into the code, in order to cover the code with new tests.
Point 2 means that

• the size of the bundle will increase with the addition of multidrag pluggin even if you don´t use it
• in case of any bug on the new logic the existing behavior of "single" drag can be broken.
  Both points that I can not merge the PR without additional code and I will have probably need a great amount of time to review/alter it.

@divinespear (I know it is late) If you could work on this two points it will help to get the PR merged

[divinespear]

@David-Desmaisons
It's hard to write unit test cause MultiDrag plugin is not exposed and cannot mockable, but I'll do my best.
first of point 2 is not worriable, every plugin already bundled in Sortable.js (but not auto mounted on default esm module), second is critical point cause plugin passes such new properties like items, newIndicies, ... for all selected items and we must handle it all.

I'll make new PR and close this when I think my turn is done.

[divinespear]

OK I think my turn is end. moved to #1052