一.写在前面

半年以前，第一次在项目上实践VueJs,由于在那之前，没有Angular,avalon等框架的实践经验，所以在Vue的使用上，没有给自己总结出更多的经验和体验。随着项目进行和优化改版，无论是新代码的增加还是旧代码，在功能的实现和代码的书写上，Vue逐渐替代了Jquery，除了有些不容易替换和没有找到基于vue更合适的组件。Vue的使用，在我个人的感受中减轻了我操作dom的负担，我不需要从dom中获取数据，然后拼装数据，也不需要向dom中回写展示数据。更不需要我各种拼接html，即使简单的html可以忍受，复杂的也将导致无法维护。组件化的开发，更能让我们js分割，职责清晰，比模块化开发的复用性更强，最后再通过工具打包。

二.本次优化内容：第一版的体验

先上第一版体验的gif图吧，说实话，当时强行做出来之后，我自己都不爱用，更不想看自己的代码和修改拼接一堆的html。截图中所体现的功能，实际上只是将教案的详细安排和每一个课时对应匹配起来。当课时数量比较多的时候，那么有多少个课时，用户可能就需要点击多少下复选框。当时，只用了vue computed来计算红色部分的文字应该如何显示，所以也能一并监控到教学方案和课时数量的改变情况数据，当教学方案和课时都已经选择的时候，会生成下方的操作内容，内容则是html拼接的。

三.完全改版

先上改版的页面效果，由于做成单课时依然需要用户操作多次，所以增加了上方几个快速操作的方式。这里使用纯Vue来实现。在这里如果有一点dom操作，将会扰乱vue的Vmodel数据，所以必须要以数据为驱动，每一个教案的详细课时，都是一个数组，操作永远都是push和splice。最后则可以直接将页面的vmodel提交。

四.上一段简单的拖动demo吧

这段demo是有很多不足支出的，是我最初参考网上其他人写法实现所用到的。你可以看到，我把榴莲拖动到小颖里面，我把它放在葡萄里面，结果这个元素apppend到了葡萄div当中。所以在实际情况中，你可能需要做很多判断，比如如果是葡萄这种div的class,则你将其放到其父元素中之类的。另外这段代码的操作，没有完全脱离dom,依然使用了appendChild。所以你的操作可以根据html上做下某些标记，来找到对应的list,并向其中push数据，或者splice数据，这样一来就是数据驱动了。

这里是代码，copy并修改vue路径直接运行

  1   1 <!DOCTYPE html>
  2   2 <html>
  3   3 <head>
  4   4     <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  5   5     <meta charset="utf-8">
  6   6     <title></title>
  7   7     <meta name="keywords" content="" />
  8   8     <meta name="description" content="" />
  9   9
 10  10     <style>
 11  11         .select-item {
 12  12             background-color: #5bc0de;
 13  13             display: inline-block;
 14  14             text-align: center;
 15  15             border-radius: 3px;
 16  16             margin-right: 10px;
 17  17             cursor: pointer;
 18  18             padding: 6px 20px;
 19  19             color: #fff;
 20  20         }
 21  21
 22  22         .cursored {
 23  23             cursor: default;
 24  24         }
 25  25
 26  26         .project-content, .people-content {
 27  27             margin: 30px 50px;
 28  28         }
 29  29
 30  30         .people-content {
 31  31             margin-top: 30px;
 32  32         }
 33  33
 34  34         .drag-div {
 35  35             border: 1px solid#5bc0de;
 36  36             padding: 10px;
 37  37             margin-bottom: 10px;
 38  38             width: 800px;
 39  39             cursor: pointer;
 40  40         }
 41  41
 42  42         .select-project-item {
 43  43             display: inline-block;
 44  44             text-align: center;
 45  45             border-radius: 3px;
 46  46         }
 47  47
 48  48         .drag-people-label {
 49  49             margin-bottom: 0;
 50  50             padding-right: 10px;
 51  51         }
 52  52
 53  53         [v-cloak] {
 54  54             display: none;
 55  55         }
 56  56     </style>
 57  57 </head>
 58  58 <body>
 59  59
 60  60     <div class='drag-content' id="dragCon">
 61  61         <div class='project-content'>
 62  62             <div class='select-item' draggable='true' @dragstart='drag($event)' v-for="pjdt in projectdatas">{{pjdt.name}}</div>
 63  63         </div>
 64  64         <div class='people-content'>
 65  65             <div class='drag-div' v-for="ppdt in peopledata" @drop='drop($event)' @dragover='allowDrop($event)'>
 66  66                 <div class='select-project-item'>
 67  67                     <label class='drag-people-label'>{{ppdt.name}}:</label>
 68  68                 </div>
 69  69             </div>
 70  70         </div>
 71  71     </div>
 72  72     <script src="../../../content/lib/vue/vue.min.js"></script>
 73  73     <script type="text/javascript">
 74  74         var dom;
 75  75         var ss = new Vue({
 76  76             'el': '#dragCon',
 77  77             data: {
 78  78                 projectdatas: [{
 79  79                     id: 1,
 80  80                     name: '葡萄'
 81  81                 }, {
 82  82                     id: 2,
 83  83                     name: '芒果'
 84  84                 }, {
 85  85                     id: 3,
 86  86                     name: '木瓜'
 87  87                 }, {
 88  88                     id: 4,
 89  89                     name: '榴莲'
 90  90                 }],
 91  91
 92  92
 93  93                 peopledata: [{
 94  94                     id: 1,
 95  95                     name: '小颖'
 96  96                 }, {
 97  97                     id: 2,
 98  98                     name: 'hover'
 99  99                 }, {
100 100                     id: 3,
101 101                     name: '空巢青年三 '
102 102                 }, {
103 103                     id: 3,
104 104                     name: '一丢丢'
105 105                 }]
106 106
107 107             },
108 108             mounted: function () {
109 109                 this.$nextTick(function () {
110 110
111 111                 })
112 112             },
113 113             watch: {
114 114                 projectdatas: {
115 115                     handler: function (val, oldval) {
116 116
117 117                     },
118 118                     deep: true
119 119                 },
120 120                 peopledata: {
121 121                     handler: function (val, oldval) {
122 122
123 123                     },
124 124                     deep: true
125 125                 }
126 126             },
127 127
128 128             methods: {
129 129                 drag: function (event) {
130 130                     dom = event.currentTarget
131 131                 },
132 132                 drop: function (event) {
133 133                     event.preventDefault();
134 134                     event.target.appendChild(dom);
135 135                 },
136 136                 allowDrop: function (event) {
137 137                     event.preventDefault();
138 138                 }
139 139             }
140 140
141 141         });
142 142
143 143
144 144     </script>
145 145 </body>
146 146 </html>

View Code

写在最后

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下加【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨点击下方红色【关注】的。
因为，我的分享热情也离不开您的肯定支持。

感谢您的阅读，我将持续输出分享，我是蜗牛, 保持学习，谨记谦虚。不端不装，有趣有梦。

转载于:https://www.cnblogs.com/tdws/p/6885604.html

一次基于Vue.Js的用户体验优化 （vue drag）相关推荐

  1. 基于原生JS项目使用Vue3 + Surely Vue Table组件

    Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...

  2. vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。

    github效果在线预览 仓库地址: https://github.com/zhongyoucong/vuejs/ vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入 ...

  3. CDN高级技术专家周哲：深度剖析短视频分发过程中的用户体验优化技术点

    摘要: 深圳云栖大会已经圆满落幕,在3月29日飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上 ...

  4. 网络产品用户体验优化系列［一］概要

    网络产品用户体验优化系列［一］概要 很高兴能在这里和大家专门沟通用户体验方面的话题,特别是能够收集大家对网络产品用户体验的反馈,以及网络产品团队在用户体验方面的优化和更新.这个系列我们只谈用户体验. ...

  5. Silverlight用户体验优化

    Silverlight用户体验优化 在发布Silverlight应用后有一个需要考虑的重要问题是:假如访客没有安装Silverlight,你就需要提供无缝的Silverlight安装体验,使用户体验中 ...

  6. 【转载】专家答疑：Silverlight的用户体验优化

    原文地址:专家答疑:Silverlight的用户体验优化 专家答疑:Silverlight的用户体验优化 作者: 博客园, 出处:博客, 责任编辑: 杜飞, 2010-01-29 13:18 在发布S ...

  7. 移动端SEO之用户体验优化提升方法

    移动端SEO之用户体验优化,前面一篇江西SEO曾庆平讲完了 移动站响应式的实现,我们再扩展一下,看看移动端网站还可以在哪些用户体验上面做提升. 1.一键拨号 如果需要在移动浏览器中实现一键拨号的功能, ...

  8. Vue.js从入门到“卸载” Vue教程

    本文参考vue官网文档和尚硅谷Vue网络课程,加入了一些自己的理解,如果觉得我说得麻烦也可以直接去vue官网看文档和尚硅谷视频 第一章 Vue介绍 1.1 什么是Vue Vue是一套用于构建用户界面的 ...

  9. 如何构建用户体验优化体系？

    在前几期的直播中,我们为大家介绍了监控和日志相关的一些内容.监控分为三个阶段,基础监控.应用监控.业务监控.前面我们已经分享了基础监控的部分,今天主要为大家带来用户体验优化的一些分享. 用户体验,是指 ...

最新文章

  1. 人人开源 VUE项目报错./src/assets/scss/index.scssModule build failed: Error: ENOENT: no such file or direct
  2. (转)IBM AIX系统安装
  3. 【深度学习】单标签多分类问题之新闻主题分类
  4. 达梦数据库html管理,达梦数据库的管理 - osc_nbqoh20k的个人空间 - OSCHINA - 中文开源技术交流社区...
  5. 《转》《七年之前与七年之后》
  6. 用R语言开始量化投资
  7. 苹果 CMS 搭建视频网站，定时采集视频
  8. java反射机制的实现原理 (一)
  9. 可视化第一部分（简单的图形）
  10. 文本PDG文件名构成
  11. Leetcode 1626 计算器
  12. 股票kdj指标api接口
  13. wireshark 手机抓包_美团外卖抓包分析
  14. 99%IT人都应该收藏的学习,找资料必备之网站
  15. 无线打印机服务器安装步骤,【DDwifi打印服务器】Windows 10系统添加打印机步骤（离线安装打印机驱动）...
  16. 17Web服务器端控件
  17. MongoDB系列之复制数据库和Collection
  18. 当智能交通遇上大数据 智能交通不再是梦
  19. python计算均线斜率_一根20日均线闯天下？ ——量化回测“压箱底指标”
  20. 微软TTS，Neospeech TTS 简单使用

热门文章

  1. echarts php 数据处理,PHP+echarts读取地图数据
  2. 关抢占 自旋锁_关于Redis分布式锁这一篇应该是讲的最好的了，先收藏起来再看！...
  3. 道路里程桩号标注_2000公里长距离电车远行，逸动EV460对里程焦虑说不
  4. 删除隐藏版本信息 版本回退_Qt如何给程序添加版本信息
  5. 福建省计算机学会 noip比赛,重磅！福州一三附学生领衔全省前九名！他们将代表福建参加全国比赛！...
  6. saveas java_在SaveAs之后Excel崩溃
  7. python封装c++接口_使用MetaSIP自动生成SIP封装C++到Python接口
  8. 常用来进行钢结构节点输出的软件是什么_高效办公神器！350个计算表格+30个小软件，工程算量不犯难...
  9. fft重叠帧_关于FFT实时频谱的几个基本概念 | 科创仪表局
  10. python adb模块_python中adb有什么功能