vue-multiselect
vue-multiselect copied to clipboard
Support draggable option to re-order selected items
I have a requirement to implement multiselect with user's ability to reorder selected items by drag-n-drop.
I tried to accomplish this by HTML5 Drag-and-Drop but drag events not fired, i guess due to @mousedown.prevent
attrs in Multiselect.vue. Second problem, there is no index in start and finish item elements. Any advices?
`mounted: { var comp = this;
_.each(document.getElementsByClassName('multiselect__tag'), function (el) {
el.addEventListener(
'dragstart',
function (e) {
e.dataTransfer.effectAllowed = 'move';
comp.dragElementIndex = parseInt(e.currentTarget.getAttribute('index'));
return false;
},
false
);
el.addEventListener(
'drop',
function (e) {
if (e.stopPropagation) e.stopPropagation();
var dropIndex = parseInt(e.currentTarget.getAttribute('index'));
move(comp.selectedItems, comp.dragElementIndex, dropIndex);
comp.dragElementIndex = undefined;
return false;
},
false
);
})
}`
I’m currently in the middle of rewriting parts of the component to make better use of slots. I think it might be possible once the refactor is done.
What is the status of the draggable functionality?
Will be possible with v3.0. Can't really predict when exactly v3 will be shipping, but hopefully this quarter.
Did you find any solutions for this?
I don’t think there’s a solution for that yet.
Can I pick this up?
@dchinu97 I don’t think we need that in the core itself... However, with the v3 changes, I think this is perfectly possible in the userland. Check out the v3
branch and see the new docs. The last example shows how vue-multiselect can be used as a set of 2 tables. I think we could have an example in the docs on how to add drag-n-drop if someone needs that.
Maybe we could have something like recipes section?
@shentao Can you please provide an example or any reference(docs) that how to add re-ordering of tags in multiselect vue? Thank you in advance.
Hello, is there any news on this, please? 🙏