Vue+VueDraggable实现的拖拽功能（CDN方式使用）

最新推荐文章于 2024-08-08 08:32:09 发布

syfnext

最新推荐文章于 2024-08-08 08:32:09 发布

阅读量4.8k

点赞数 3

分类专栏： vue组件(vuedraggable) 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/syfnext/article/details/105319955

版权

本文介绍了如何在Vue项目中使用vuedraggable实现拖拽功能，特别是通过CDN方式引入该组件。vuedraggable是基于Sortable.js的Vue组件，提供了npm和CDN两种安装方式，文章主要探讨了CDN的轻量级实现。内容包括基本功能的代码示例。

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

在web开发中拖拽是一门比较常见的实现技术，最近抽空研究了vuedraggable这个组件。下面简单的记录下使用心得。
vuedraggable是一款基于Sortable.js的vue组件，所以他的使用方式就有常规的两种；1、通过npm的包管理工具安装；2、通过CDN引入的方式。通常网上都是npm安装的教程比较多，这边就不多介绍了；研究的时候因为是从轻量级的实现方案考虑，使用了一下CDN的实现方案。
vuedraggable官网：npm官网
直接上代码（基本功能）

<html>
    <head>
        <meta charset="utf-8" />
        <title>vue的拖拽</title>
        <style>
            .common-div{
   
                float:left;
                width: 300px;
                height: 400px;
                border: 1px solid black;
                margin-right: 10px;
            }
            .common-div ul{
   
                width: 100%;
                height: 100%;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="target-div common-div">