vue-multiselect
vue-multiselect copied to clipboard
shentao
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.
Will be possible with v3.0. Can't really predict when exactly v3 will be shipping, but hopefully this quarter.
@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.
