原生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 相关文章推荐
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
element多个表单校验的实现
May 27 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
PHP异常处理浅析
2015/05/12 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js常用排序实现代码
2010/12/28 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python树莓派红外反射传感器
2019/01/21 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
护理个人求职信范文
2014/01/08 职场文书
美术指导求职信
2014/03/17 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
党支部四风整改方案
2014/10/25 职场文书
回复函范文
2015/07/14 职场文书
物资采购管理制度
2015/08/06 职场文书
php png失真的原因及解决办法
2021/11/17 PHP