原生js实现拖拽移动与缩放效果


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下

效果图如下-实现了简单的拖拽和缩放功能

原生js实现拖拽移动与缩放效果

第一步—简单的拖拽功能

// 创建一个MoveClass构造函数
 function MoveClass(id, options = {}) {
 // 绑定ele属性
 this.ele = document.querySelector(id);

 this.move();
}
// 给MoveClass原型上绑定move方法
 MoveClass.prototype.move = function () {
 // ele的鼠标按下事件调用mousedown
 this.ele.onmousedown = e => {
 // 获取事件对象
 var e = e || window.event;
 // 鼠标按下时,鼠标相对于元素的x坐标
 var x = e.offsetX;
 // 鼠标按下时,鼠标相对于元素的y坐标
 var y = e.offsetY;
 // 鼠标按下移动时调用mousemove
 document.onmousemove = e => {
 // 元素ele移动的距离l
 var l = e.clientX - x;
 // 元素ele移动的距离l
 var t = e.clientY - y;
 this.ele.style.left = l + "px";
 this.ele.style.top = t + "px";
 }
 // 当鼠标弹起时,清空onmousemove与onmouseup
 document.onmouseup = () => {
 document.onmousemove = null;
 document.onmouseup = null;
 }
 }
 }
 // new一个MoveClass对象
 var moveClass = new MoveClass("#box");

效果如下,简单的拖拽

原生js实现拖拽移动与缩放效果

第二步—简单的缩放功能

1.设置方位

// ele的左,左上,左下,右,右上,右下,上,下
 MoveClass.prototype.editoptions = {
 left_top: true,
 left: true,
 right: true,
 top: true,
 bottom: true,
 right_top: true,
 left_bottom: true,
 right_bottom: true,
 }

2.给原型绑定缩放的方法

// 给原型绑定缩放的方法
 MoveClass.prototype.editEle = function () {
 // console.log(this.ele.clientWidth,this.ele.clientHeight);
 // console.log(this.ele.offsetLeft,this.ele.offsetTop);
 var that = this;
 // 创建一个div
 var div = document.createElement("div");
 // 遍历this.editoptions
 for (let attr in this.editoptions) {
 if (this.editoptions[attr]) {
 // 循环创建左,左上,左下,右,右上,右下,上,下方位的小点
 var dian = document.createElement("div");
 dian.className = "dian " + attr;
 // 设置类型为对应的attr
 dian.dataset.type = attr;
 // 当按下对应方位的小点时
 dian.onmousedown = e => {
 var e = e || window.event;
 // 先获取鼠标距离屏幕的left与top值
 var clientXY = {
 x: e.clientX,
 y: e.clientY
 }
 // 获取鼠标按下时ele的宽高
 var eleWH = {
 width: this.ele.clientWidth,
 height: this.ele.clientHeight,
 }
 // 阻止事件冒泡(针对父元素的move)
 e.stopPropagation();
 // 通过e.target获取精准事件源对应的type值
 var type = e.target.dataset.type;
 // 鼠标按下对应方位小点移动时,调用mousemove
 document.onmousemove = function (e) {
 // 查找type中是否包含”right“
 if (type.indexOf('right') > -1) {
 // console.log("right");
 // 如果拖拽后的宽度小于最小宽度,就return出去
 if (that.options.minWidth > eleWH.width + e.clientX - clientXY.x) {
 return;
 }
 // ele拖拽后的宽度为:初始width+拖拽后鼠标距离屏幕的距离 - 第一次按下时鼠标距离屏幕的距离
 that.ele.style.width = (eleWH.width + e.clientX - clientXY.x) + "px";
 }
 // 与”right“相同原理
 if (type.indexOf("bottom") > -1) {
 // console.log("bottom");
 if (that.options.minHeight > eleWH.height + e.clientY - clientXY.y) {
 return;
 }
 that.ele.style.height = (eleWH.height + e.clientY - clientXY.y) + "px"
 }

 if (type.indexOf("top") > -1) {
 // console.log("top");
 if (that.options.minHeight > eleWH.height - e.clientY + clientXY.y) {
 return;
 }
 // ele拖拽后的高度为:初始height-拖拽后鼠标距离屏幕的距离 + 第一次按下时鼠标距离屏幕的距离
 that.ele.style.height = (eleWH.height - e.clientY + clientXY.y) + "px";
 // 重新设置ele的top值为此时鼠标距离屏幕的y值
 that.ele.style.top = e.clientY + "px";
 }
 // 与”top“相同原理
 if (type.indexOf("left") > -1) {
 // console.log("left");
 if (that.options.minWidth > eleWH.width - e.clientX + clientXY.x) {
 return;
 }
 that.ele.style.width = (eleWH.width - e.clientX + clientXY.x) + "px";
 // 重新设置ele的left值为此时鼠标距离屏幕的x值
 that.ele.style.left = e.clientX + "px";
 }
 }
 document.onmouseup = function () {
 document.onmousemove = null;
 document.onmouseup = null;
 }
 }
 }
 // 将类名为”dian“的div添加到div中
 div.appendChild(dian);
 }
 // 为div设置类名
 div.className = "kuang"
 // 将类名为”kuang“的div添加到ele中
 this.ele.appendChild(div);
 }

效果图如下

原生js实现拖拽移动与缩放效果

最终效果,盒子可以拖动,可以缩放。

盒子上的8个小点采用定位放上去的,事先写好了样式

<style>
 * {
 margin: 0;
 padding: 0;
 }

 #box {
 width: 100px;
 height: 100px;
 background: orange;
 position: absolute;
 left: 100px;
 top: 100px;
 }

 .kuang {
 box-sizing: border-box;
 border: 1px solid #0f0;
 width: 100%;
 height: 100%;
 position: relative;
 }

 .kuang .dian {
 position: absolute;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #0f0;
 }

 .left_top {
 left: -5px;
 top: -5px;
 }

 .right_top {
 right: -5px;
 top: -5px;
 }

 .left_bottom {
 left: -5px;
 bottom: -5px;
 }

 .right_bottom {
 right: -5px;
 bottom: -5px;
 }

 .top {
 top: -5px;
 left: 50%;
 transform: translateX(-50%);
 }

 .bottom {
 bottom: -5px;
 left: 50%;
 transform: translateX(-50%);
 }

 .left {
 left: -5px;
 top: 50%;
 transform: translateY(-50%);
 }

 .right {
 right: -5px;
 top: 50%;
 transform: translateY(-50%);
 }
</style>
<body>
 <div id="box" class="border"></div>
</body>

所有的代码能直接粘贴使用。缩放的原理其实就是鼠标按下去时,获取当前的鼠标位置和盒子的宽高,鼠标按下并移动后获取此时的鼠标位置。

拖拽后的宽高=初始宽高+(拖拽后鼠标距离屏幕的位置 - 第一次按下时鼠标距离屏幕的位置)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 #Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 #Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 #Javascript
JS实现按比例缩小图片宽高
Aug 24 #Javascript
JS实现简易贪吃蛇游戏
Aug 24 #Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 #Javascript
You might like
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
列表内容的选择
2006/06/30 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
js tab 选项卡
2009/04/26 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python退出循环的方法
2020/06/18 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
配件采购员岗位职责
2013/12/03 职场文书
高效课堂标语
2014/06/26 职场文书
民间借贷被告代理词
2015/05/23 职场文书
离职告别感言
2015/08/04 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Java的Object类的九种方法
2022/04/13 Java/Android