draggable with handler doesn't work

[Dontorpedo]

Hi,

I am using the code from the example (Draggable with handler) but it doesn't work..

the whole div is stil draggable.. the handler seems to be not recognized.

pls help :)

[IsraelZablianov]

Hi,
Can you share a link to your code?

[Dontorpedo]

`

<draggable :list="tour.invoice_position" :options="{animation:200, group: 'touren'}" :element="'tbody'" @change="update" >

                    <tr  v-if="pos.tour_id == '100' && pos.objekte.status == 'aktiv' && isVisible || pos.tour_id == '100' &&pos.objekte.status == 'WW' && isVisible " v-for="(pos, index) in tour.invoice_position" :key="pos.id" :data-id="pos.id">
                        <td >{{pos.objekte.zipcode}}, {{pos.objekte.street}}               {{pos.objekte.additional_street}}</td>
                        <td>{{pos.pos_description}} {{pos.pos_id}}
                         </td>

                    </tr>
                </draggable>

            </table>`

and the other part:
`<script>
import draggable from 'vuedraggable'
import { Draggable } from 'draggable-vue-directive'
export default {
components: {
draggable
},
directives: {
Draggable,
},
watch: {
filtered() {
console.log('Foo Changed!');
}
},
data() {
return {
opened: [],
touren: [],
temp: [],
search: '',
isSticky: false,
isVisible: false,
handleId: "handle-id",
draggableValue: { handle: undefined }
}
},
mounted() {
this.getTouren();
this.draggableValue.handle = this.$refs[this.handleId];
},

......... ......... .........`

[IsraelZablianov]

Actually in your example you are not using the directive at all...
In the example that you provided you are using a different library.
For example how to use the draggable-vue-directive please look at this repo

[IsraelZablianov]

<template>
            <div class="draggable-with-handler" v-draggable="draggableWithHandler">
                Use Handler To Drag Me
                <div class="handler" ref="handler">
                    I am Handler
                </div>
            </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Draggable, DraggableValue } from "draggable-vue-directive";
@Component({
    directives: {
        Draggable
    }
})
export default class App extends Vue { 
    draggableWithHandler: DraggableValue = { handle: undefined };

    mounted() {
  
        this.draggableWithHandler.handle = this.$refs.handler as HTMLElement;
    }


}
</script>

this is one of the examples from this repo.