Issue with Safari and Dragging

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]

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

And now use DraggableDirectiveOptions instead of Draggable

[jtsom]

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