vue 拖拽

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

久九·

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

阅读量272

点赞数

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

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

版权

本文介绍了如何在Vue.js项目中实现基于class名的拖拽功能，并允许元素删除和重新拖动。通过引入jQuery实现拖拽操作，虽然不推荐在Vue中直接操作DOM，但示例代码展示了其实现思路。

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

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

需求是左边元素拖到右边任意一个框里都可以，而且可以删除从新拖

在这里插入图片描述

安装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"