如何用JavaScript编写实现元素的拖拽与缩放功能？

本文共计1382个文字，预计阅读时间需要6分钟。

目录+前言+基本思路+拖拽实现+缩放实现+最后+前言+在写一个简单的H5页面时，需要实现以下拖拽效果，找了半天没找到合适的，求包含以下元素：手写+先来看一下我们是要实现怎样的效果。

目录

• 前言
• 基本思路
• 拖拽实现
• 缩放实现
• 最后

前言

在写一个简单的H5页面时，需要实现如下的一个拖拽效果，找了半天未能找到符合要求的，含泪手写
先来看一下我们要是实现一个怎样的效果

基本思路

• 鼠标摁下，记录元素的初始位置以及宽高
• 监听鼠标的移动，根据鼠标的移动不断改变自己的位置/宽高
• 是否存在边界限制

拖拽实现

我们常见的改变元素位置的方式有

• 定位
• 使用translate进行偏移

那我们现在用那种方式那实现拖拽呢？
从功能实现上来看，这两个方式都能很好的实现我们的需求
从性能上来看，translate天生就是用来制作动画效果的，所以translate的性能以及流畅度都是要优于定位的。