Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.71k stars 106 forks source link

[Feature request] - Add static items inside vDraggable component #146

Open jakubmatisak opened 2 weeks ago

jakubmatisak commented 2 weeks ago

Hello, Im dealing with kinda tricky problem. I want to use <table> and make <tr> in thead draggable, but i must have first and last columns fixed. I can disable dragging on first/last item, but all other draggable items can be moved there because <tr> is still draggable. I did not find solution to deal with this in documentation.

I have also found solution in VueDraggableNext https://github.com/SortableJS/vue.draggable.next with header and footer slot (and tried it, it works). It would be lovely to have it there, because I found your solution to be better and more up to date.

This is example how I guess it should be working: In static regions draggable options should be completely deactivated, even if it is inside .

  <draggable
    v-model="list"
    handle=".column__content__handle"
    tag="tr"
    @end="onEnd"
  >
    <!--region static-->
    <td class="staticBefore"></td>
    <!--end region static-->

    <!--region draggable-->
      <td v-for="item in list" :key="item.id" :class="item.name" class="item">
        {{ item.name }}
      </td>
    <!--end region draggable-->

    <!--region static-->
    <td class="staticAfter"></td>
    <!--end region static-->
  </draggable>

Here is also example of application: All is in one <tr> but first two columns has to be there, no matter what..