Doesn't create a dragging element for the inner component

[syshen]

I am creating a dashboard app with widgets and using Bootstrap for the responsive.

This is what I am doing:

        <div class="row">
          <draggable :list="widgets">
              <div v-for="(widget, index) in widgets" :class="'col-lg-' + widget.cols">
                <chart-widget :setting="widget" v-on:remove="removeWidget"></chart-widget>
              </div>
          </draggable>
        </div>

chart-widget is a component to show the widget. I wrap the chart-widget inside a col <div>. The dragging works, but it doesn't show a dragging element when I drag. The behavior looks like this: https://youtu.be/f1sAd5VDLeQ

How could I make this work?

[syshen]

I think this issue is because I am using Google Charts inside the widget. Sortable.js cannot render the chart while dragging the item around. I might need to come out a different approach to solve this issue.

[David-Desmaisons]

Hey @syshen , as you mentioned this issue is linked to Sortable and not vue.draggable. Without any jsfiddle, it is quite hard to provide you help. Did you try to play arround with ghostClass and animation options of the Sortable constructor? If the problem persits, you should open an issue for the Sortable project.

[David-Desmaisons]

Please open an issuefor Sortable project