Add class to item on drop

[polymer-coder]

Is there a way to add an effect onDrop? For instance, if you drag and drop a row on a table, how would one turn the dropped row red. I tried reading the documentation but I only saw 'ghost-class'

[sukai-cheng]

[lifeilu]

Hello, have u solved the problem? I meet the same problem: I want to add a custom class to the dropped item and cannot find a option. Hope to get ur advice. Thanks a lot.

Is there a way to add an effect onDrop? For instance, if you drag and drop a row on a table, how would one turn the dropped row red. I tried reading the documentation but I only saw 'ghost-class'

[polymer-coder]

@lifeilu I implemented a hacky way to do it and never got back to fixing it according to @sukai-cheng comment. You should probably try that out first before doing what I did.

I basically added an id to the table row and then styled it manually via CSS:

<draggable :list="props.items" tag="tbody" @change="changed( $event)" v-bind="{disabled : isPriorityChanging}">
          <tr v-for="(row, index) in props.items" :key="index" :id="`row-${index}`">
              <td style="cursor: grab;"> <v-icon small>mdi-arrow-all</v-icon></td>
            <td>{{ row.orderId }}</td>
            <td>{{ row.itemCode }}</td>
            <td>{{ row.item.generalData.customerDescription }}</td>
            <td>{{ row.number }}</td>
          </tr>
<draggable />

Then whenever a row was dropped (i.e. a change event):

    async changed(rowRaw){

      const { element, newIndex, oldIndex} = rowRaw.moved;
      const m = document.querySelector(`#row-${newIndex}`);
      m.style['background-color']="rgba(41,98,255,0.5)";
      m.style.transition="background-color 0.6s";
      
            setTimeout(() => {
        m.style['background-color']="transparent";
        m.style.transition="background-color 0.5s";
      }, 600);
}

[lifeilu]

@lifeilu I implemented a hacky way to do it and never got back to fixing it according to @sukai-cheng comment. You should probably try that out first before doing what I did.

I basically added an id to the table row and then styled it manually via CSS:

<draggable :list="props.items" tag="tbody" @change="changed( $event)" v-bind="{disabled : isPriorityChanging}">
          <tr v-for="(row, index) in props.items" :key="index" :id="`row-${index}`">
              <td style="cursor: grab;"> <v-icon small>mdi-arrow-all</v-icon></td>
            <td>{{ row.orderId }}</td>
            <td>{{ row.itemCode }}</td>
            <td>{{ row.item.generalData.customerDescription }}</td>
            <td>{{ row.number }}</td>
          </tr>
<draggable />

Then whenever a row was dropped (i.e. a change event):

    async changed(rowRaw){

      const { element, newIndex, oldIndex} = rowRaw.moved;
      const m = document.querySelector(`#row-${newIndex}`);
      m.style['background-color']="rgba(41,98,255,0.5)";
      m.style.transition="background-color 0.6s";
      
            setTimeout(() => {
        m.style['background-color']="transparent";
        m.style.transition="background-color 0.5s";
      }, 600);
}

@lifeilu I implemented a hacky way to do it and never got back to fixing it according to @sukai-cheng comment. You should probably try that out first before doing what I did.

I basically added an id to the table row and then styled it manually via CSS:

<draggable :list="props.items" tag="tbody" @change="changed( $event)" v-bind="{disabled : isPriorityChanging}">
          <tr v-for="(row, index) in props.items" :key="index" :id="`row-${index}`">
              <td style="cursor: grab;"> <v-icon small>mdi-arrow-all</v-icon></td>
            <td>{{ row.orderId }}</td>
            <td>{{ row.itemCode }}</td>
            <td>{{ row.item.generalData.customerDescription }}</td>
            <td>{{ row.number }}</td>
          </tr>
<draggable />

Then whenever a row was dropped (i.e. a change event):

    async changed(rowRaw){

      const { element, newIndex, oldIndex} = rowRaw.moved;
      const m = document.querySelector(`#row-${newIndex}`);
      m.style['background-color']="rgba(41,98,255,0.5)";
      m.style.transition="background-color 0.6s";
      
            setTimeout(() => {
        m.style['background-color']="transparent";
        m.style.transition="background-color 0.5s";
      }, 600);
}

Thanks a lot. I will try~