vue 拖拽

最新推荐文章于 2024-01-10 15:10:22 发布

久九·

最新推荐文章于 2024-01-10 15:10:22 发布

阅读量205

点赞数

分类专栏： vuex 小程序文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52181275/article/details/126052323

版权

该博客介绍了如何在Vue.js项目中集成jQuery来实现拖拽功能。首先，博主讲解了如何安装jQuery库，然后对整个实现过程进行了总结。

摘要由CSDN通过智能技术生成

根据class名字拖拽的相对于的位置可删除

- 安装jq
- 总结：

安装jq

npm i jquery

<template>
  <div>
    <ul class="planWrap">
      <li v-for="(item, index) in televisionList" :key="index">
        <img
          :id="item.id"
          class="draggable"
          draggable="true"
          :src="require(`../assets/${item.id}.jpg`)"
          :alt="item"
        />
        <p class="libraryTextSize">{
   {
    item.name }}</p>
      </li>
    </ul>
    <ul class="dragList dragList2">
      <li
        class="droppableEle dCerdraganddropname"
        ref="claswqnameDc2"
        data-index="11"
      ></li>
      <li
        class="droppableEle dCerdraganddropname"
        ref="claswqnameDc2"
        data-index="11"
      ></li>
      <li
        class="droppableEle dCerdraganddropname"
        ref="claswqnameDc2"
        data-index="11"
      ></li>
    </ul>
  </div>
</template>

<script>
import $ from "jquery";
export default {
   
  name: "HelloWorld",
 
  data() {
   
    return {
   
      list: [],
      televisionList: [
        {
   
          name: "Vue",
          id: "1",
        },
        {
   
          name: "Vue",
          id: "2",
        },
        {
   
          name: "Vue",
          id: "3",
        },
      ],
    };
  },
  created() {
   
    setTimeout(() => {
   
      this.initiateGame();
    }, 300);
  
  },
  methods: {
   
    initiateGame() {
   
      this.draggableElements = document.querySelectorAll(".draggable");
      this.droppableElements = document.querySelectorAll(".droppableEle");
      this.draggableElements.forEach((elem) => {
   
        elem.addEventListener("dragstart", this.dragStart);
      });
      this.droppableElements.forEach((elem) => {
   
        elem.addEventListener("dragenter", this.dragEnter);
        elem.addEventListener("dragover", this.dragOver);
        elem.addEventListener("dragleave", this.dragLeave);
        elem.addEventListener("drop"