How to drag the selected items?

[qinyao86]

Environments

• Framework name:vue
• Framework version:3
• Component name: vue3-selecto
• Component version:
• Testable Address(optional):

Description

Hi, I have a problem in my project.
I need to select multi items that can be drag and drop to somewhere.but when I try to drag the selected items, selecto will reselect the item which I clicked at and remove the others.
How can I prevent the select event when I start drag inside a selected item, and select the item when just click?
Hope for reply!

[daybrush]

@qinyao86

1. use preventClickEventOnDrag option to true
2. use selectFromInside option to true
3. Try calling .setSelectedTargets method on the your target, item, dom's click event.
4. Use the Drag API.

[qinyao86]

I used preventClickEventOnDrag=true and selectFromInside =true, but still not work for me.
I used a very complicated method to sovle this:
In the onDrag event,determine whether the mouse is on the selected item.
If on:

1. stop the selecto event(e.stop())
2. document.addEventListener("mousedown",onMousedown);
   document.addEventListener("mousemove",onMousemove);
   document.addEventListener("mouseup",onMouseup);
3. in onMousemove event, I can know the mouse move distance,
   if distance>=4 : It will trigger the default drag event and no select drag event happen.
   if distance<4: It means it is a click event, I use setSelectedTargetsByPoints() to select the item by manual.