options to prevent native link dragging?

[lmssieh]

the element get stuck and start following the mouse, I have to right-click for it to drop in place, which is very annoying. any way to fix this besides adding custom CSS?

a {
    -webkit-user-drag: none;
    user-select: none;
}

[amendx]

@lmssieh can you show me a snippet of your code? and maybe a gif of the behaviour

[lmssieh]

you can reproduce this bug easily, just add a link inside Draggble then hover over the link and drag.

[amendx]

@lmssieh i have tried this scenarios, and I think yours is the first one. You can try out the others and see if it still happens.

1. tag="a" inside the Container. This is where your error can be reproduced, you can easily see that when you hover any child, all the children are selected. They all share the same ref, that's why you cannot select, move and expect the proper behaviour. Wrong solution ❌

<Container
      :get-ghost-parent="getGhostParent"
      :get-child-payload="getChildPayload"
      tag="a"
      @drop="onDrop"
      @drop-ready="onDropReady"
      @drop-not-allowed="dropNotAllowed">
      <Draggable v-for="item in items" :key="item.id">
        <div class="draggable-item">
          {{ item.data }}
        </div>
      </Draggable>
    </Container>

2. a tag as for the child of the Draggable element. Acceptable solution ✅

  <Draggable v-for="item in items" :key="item.id">
        <a class="draggable-item">
          {{ item.data }}
        </a>
      </Draggable>

3. tag="a" for the Draggable element: Acceptable solution ✅

      <Draggable v-for="item in items" :key="item.id" tag="a">
        <div class="draggable-item">
          {{ item.data }}
        </div>
      </Draggable>