vue中原生H5拖拽排序_拖拽图片也是同样的道理

原创

已于 2023-11-21 23:19:52 修改 · 438 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#javascript #拖拽 #排序 #drag #vue

于 2023-11-21 23:18:53 首次发布

本文介绍了如何在Vue应用中利用原生H5拖拽API和vuedraggable库实现拖拽排序功能，包括拖拽图片的排序。详细讲解了拖拽API的简单实现和vuedraggable的使用方法，提供相关代码示例及参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】

H5有基于拖拽的事件机制，如果你还不熟悉，请看我之前的文章【拖拽上传】中有介绍。

原生拖拽API实现

由于比较简单直接上代码了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽排序</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
  <style>
    ul {
     
     
      clear: both;
      list-style: none;
      overflow: hidden;
    }

    li {
     
     
      cursor: pointer;
      float: left;
      height: 32px;
      line-height: 30px;
      padding: 0 10px;