Issue with Safari and Dragging

[jtsom]

On Safari on MacOS, doing a simple drag and drop sample doesn't seem to function correctly.

Clicking and dragging on a draggable div does not initiate a correct drag. On drag start, a copy of the div is under the mouse - the original div is still in the same place. On mouse up, the div snaps back to the start, but moving the mouse will show another image of the div under the cursor. Clicking will "drop" it.

.vue file:

<template>
  <div class="main">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <div class="draggable-container" v-draggable>Drag Me</div>

    <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 { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { Draggable, DraggableValue } from 'draggable-vue-directive';

@Component({
  components: {
    HelloWorld,
  },

  directives: {
    Draggable,
  },

})
export default class Home extends Vue {

  private draggableWithHandler: DraggableValue = { handle: undefined };

  public mounted() {
    this.draggableWithHandler.handle = this.$refs.handler as HTMLElement;
  }
}
</script>

<style >
.main {
  display: flex;
  justify-content: space-around;
  height: 100%;
  width: 100%;
}
.control-group {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.control-btn {
  border-radius: 3px;
  background-color: #42b883;
  color: #35495e;
  cursor: pointer;
  padding: 15px;
  margin: 15px;
}
.draggable-container {
  width: 150px;
  height: 150px;
  background: white;
  border: 3px solid #42b883;
  border-radius: 3px;
  text-align: center;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-for-draggable {
  background: white;
  border: 3px solid #42b883;
  border-radius: 3px;
  text-align: center;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  align-self: flex-end;
  width: 300px;
  height: 200px;
  bottom: 20px;
}
.draggable-with-handler {
  background: white;
  border: 3px solid #42b883;
  border-radius: 3px;
  text-align: center;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  align-self: flex-end;
  width: 300px;
  height: 200px;
  bottom: 20px;
  left: 20px;
}
.handler {
  padding: 5px;
  position: absolute;
  top: 0;
  left: 70px;
  margin-top: -45px;
  background: white;
  border: 3px solid #42b883;
  border-radius: 3px;
  text-align: center;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.draggable-with-reset {
  background: white;
  border: 3px solid #42b883;
  border-radius: 3px;
  text-align: center;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  align-self: flex-end;
  width: 300px;
  height: 200px;
  bottom: 20px;
  right: 20px;
}
.autor {
  align-self: flex-start;
  margin-top: 25px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
  color: #42b883;
  background-color: #35495e;
  font-size: 25px;
  font-weight: bolder;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

package.json:

{
  "name": "vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "draggable-vue-directive": "^2.0.6",
    "vue": "^2.5.22",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-typescript": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.22"
  }
}

[IsraelZablianov]

Please try version 2.0.3 for know and let me know if it helped.
The bug will be fixed ASAP.

[jtsom]

Yes, that does seem to fix the dragging problem - however it brings back the compilation error with The Vue Cli and Typescript:

19:3 Argument of type '{ components: { HelloWorld: typeof HelloWorld; }; directives: { Draggable: { bind(el: HTMLElement, binding: DraggableBindings): void; update(el: HTMLElement, binding: DraggableBindings): void; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
    17 | 
    18 | @Component({
  > 19 |   components: {
       |   ^
    20 |     HelloWorld,
    21 |   },
    22 | 

Looking forward to the update. Thanks.

[IsraelZablianov]

For quick fix you can declare that the import is with type any.
The bug will be fixed in the next version.

[jtsom]

Trying to use your quick fix suggestion, but I'm not able to get the right syntax... have an example?

[IsraelZablianov]

import { Draggable, DraggableValue } from 'draggable-vue-directive';
const DraggableDirectiveOptions: any = Draggable;

And now use DraggableDirectiveOptions instead of Draggable