原生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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
react路由配置方式详解
Aug 07 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 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.ini中文版(2)
2006/10/09 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python之os操作方法(详解)
2017/06/15 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python logging.info在终端没输出的解决
2020/05/12 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
离婚协议书范文
2015/01/26 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
金砖之国观后感
2015/06/11 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers