java和vue实现拖拽可视化_Vue拖拽组件开发实例详解

摘要：这篇Vue栏目下的“Vue拖拽组件开发实例详解”，介绍的技术点是“Vue拖拽组件开发实例、vue拖拽组件、拖拽组件、组件开发、开发实例、实例详解”，希望对大家开发技术学习和问题解决有帮助。

为什么选择Vue?

主要原因：对于前端开发来说，兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之，Vue本身具有以下主要特性：

•使用虚拟DOM；

•轻量级框架；

•高效的数据绑定；

•灵活的组件系统；

•完整的开发生态链。

这就是我们为什么选择Vue框架的一些原因。

为什么要封装成一个Vue组件？

主要目的是可提高代码的复用性和可维护性。

•复用性：组件化后，一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性。

•可维护性：组件化后，组件内部的逻辑只对组件负责，外部的逻辑只通过配置参数适配，所以提高了代码的逻辑清晰度，可以快速定位代码出现问题的地方。

组件化搭建页面图示：

上图可看出，在Vue中，所谓组件化搭建页面，简单来说，页面实际上是由一个个功能独立的组件搭建而成。这些组件之间可以组合、嵌套，最终形成了我们的页面。

组件构成

下面是一个完成的组件构成：

// 组件内模板

// 组件内逻辑代码

// 组件内封装的样式

开发Vue移动拖拽组件为例

拖拽原理

手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。

拖拽实现

•开始拖动时：获取到接触点相对于整个视图区的坐标clientX，clientY；获取元素距离视图上侧和左侧的距离 initTop，initLeft；计算接触点距离元素上侧和左侧的距离 elTop