Vue中可拖动的jQuery

Question

我正在尝试在我的 Vue POC 中创建一个拖放系统。我在网上搜索过，最流行的方法似乎是jQuery可拖动。

很遗憾，我无法让它工作。这个平台上的其他人对此没有问题，所以我认为我的代码或我的依赖项有问题。

组件代码：

<template>
  <div>
    <h1>Drag the images into the box</h1>
    <div class="images">
      <img class="image" :src="image1" alt="">
      <div class="box"></div>
      <img class="image" :src="image2" alt="">
    </div>

    <button @click="mergeImages()">
      Save!</button>

    <h2>Output:</h2>
    <img :src="mergedImage" alt="Please merge the images to view the output">
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  data() {
    return {
      image1: 'https://winning-proposal.imgix.net/wp-securitas/sKu9q2fntbpohnWEpUhqLeVKti7vRhPLXvawa0XZvldV07FqaJWwFGmRPKje/bloempot.png',
      image2: 'https://winning-proposal.imgix.net/wp-securitas/qpCFRkZlCjusFsCpLlC5mQWucJLTn0XAqZMijLh2uBYFPhXoJyJQapHwIQX3/bloempje.png',
      mergedImage: null,
    };
  },
  methods: {
    mergeImages() {
      this.mergedImage = this.image1 + '?blend=' + this.image2 + "&blend-mode=overlay"
    },
  },
  mounted(){
    $('.image').draggable({
      revert: true
    })

    $('.box').droppable({
      hoverClass: 'drop-hover',
      drop: function(){
        console.log('-= dropped =-')
      }
    })
  }
}
</script>

<style>
  .images {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom:16px;
  }
  .image {
    max-height: 500px;
    max-width: 500px;
    cursor: grab;
  }
  .box {
    height: 500px;
    width: 500px;
    border: 1px solid black;
  }
</style>

如您所见，我正在尝试使我的图像可拖动，但它们不会拖动。

package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

谁能发现我在这里做错了什么？提前致谢

Answer 1

请打开以下链接并检查它，因为您使用的是 jquery，但 Vue js 提供拖放库npm install vue-draggable。所以一切都在下面的链接中提供或解释。

https://vuejsexamples.com/vuejs-drag-and-drop-library-without-any-dependency/

https://codepen.io/nikolasp/pen/yvpWJR