no show item when drag

[matamune94]

i use nuxt js and have this bug :

[Jexordexan]

@matamune94 I'll need more context, it's not very easy to debug it from just a screencap

[pmooredesigner]

I just started using vue-slicksort and had this issue myself, so I figured I'd share in case it would help you or anyone else.

What was happening in my case (I'm using Quasar) was when the dragged element gets appended to the body, it was being hidden by elements with a higher z-index, so I defined my own helper class using the "helperClass" prop and gave that class a z-index of 9999. In my case, it actually did require a 4 digit number.

[birchb]

@pmooredesigner Interesting. I'm also using vue-slicksort in two places in a quasar app. The one that is nested inside a q-card in q-dialog disappears as it is dragged. The other is just is inside a q-step and works as expected.

[floydback]

I have the same problem, but I in my case only canvas element be hidden

[floydback]

The problem is with cloneNode method that only clone empty canvas without rendering any content. I solve this with @sort-start

<SlickList
        :lockToContainerEdges="true"
        helperClass="sortHelperJs"
        lockAxis="y"
        :distance="20"
        v-model="list"
        @sort-start="onSortStart($event)"
>

onSortStart(events) {
      let oldCanvas = events.node.querySelector('canvas')
      let newCanvas = document.querySelector('.sortHelperJs canvas')

      var context = newCanvas.getContext('2d')
      context.drawImage(oldCanvas, 0, 0)
    },

sortHelperJs is a hack to find a cloned area. I didn't find better way to do this

[johndatserakis]

@pmooredesigner Yup this was my exact issue as well and I'm using bootstrap-vue. I just simply added a class to my SlickItem component and set its z-index to 9999. Thank you.