JavaScript实现拖拽和缩放效果
更新时间：2020年08月24日 10:56:01 作者：Twelve--
这篇文章主要为大家详细介绍了JavaScript实现拖拽和缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>拖拽缩放</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
* {
margin: 0;
padding: 0
}
#box {
width: 100%;
height: 100%;
position: relative;
background: #4bb0bb
}
#drag {
width: 200px;
height: 200px;
position: relative;
background: #691fff;
cursor: move;
}
#scale {
width: 20px;
height: 20px;
position: absolute;
background: #ffa500;
cursor: se-resize;
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
<body>
<div id="box">
<div id="drag">
<div id="scale"></div>
</div>
</div>
</body>
<script>
window.onload = function () {
var box = document.getElementById("box")
var drag = document.getElementById("drag")
var scale = document.getElementById("scale")
// mousedown mousemove mouseup
dragTool(drag)
scaleTool(drag, scale, box)
// 拖拽方法
function dragTool(node) {
node.onmousedown = function (ev) {
// 浏览器兼容处理
var e = ev || window.event;
// 鼠标按下记录相对位置
// 水平方向都距离 = 当前鼠标左边的距离 - 被拖拽元素距离左边的距离
var offsetX = e.clientX - node.offsetLeft;
// 垂直方向都距离 = 当前鼠标都上边的距离 - 被拖拽元素距离距离的距离
var offsetY = e.clientY - node.offsetTop;
// 鼠标移动和被拖拽的元素是相对的 这里是鼠标拖拽的物体在整个页面上移动 所以
// move加在document上
document.onmousemove = function (ev) {
// 当前鼠标的事件对象
var e = ev || window.event;
// 定义 currentLeft = 当前鼠标位置 - 距离左边的距离
var currentLeft = e.clientX - offsetX;
// 定义 currentTop = 当前鼠标上边位置 - 距离上边的距离
var currentTop = e.clientY - offsetY
// 限制左出界 最左是 0
if (currentLeft <= 0) {
currentLeft = 0;
}
// 当前窗口的宽 浏览器兼容
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 限制右边出界 如果大于当前窗口的宽 那么就让它等于当前窗口的宽减去当前元素的offsetWidth 也就是留在原地
if (currentLeft >= windowWidth - node.offsetWidth) {
currentLeft = windowWidth - node.offsetWidth;
}
// 设置上出界 最上边是 0
if (currentTop <= 0) {
currentTop = 0;
}
// 当前窗口的高 浏览器兼容
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 限制下边出界 如果大于当前窗口的高 减去 本身的高 那么就让它等于 当前窗口的高减去本身的高
if (currentTop >= windowHeight - node.offsetHeight) {
currentTop = windowHeight - node.offsetHeight;
}
// 当前被拖拽元素的 left 值 等于上面计算出的 currentLeft
node.style.left = currentLeft + 'px';
// 当前被拖拽元素的 top 值 等于上面计算出的 currentTop
node.style.top = currentTop + 'px';
}
}
// 鼠标弹起取消拖拽 这里添加到 node 元素对象也可以的
document.onmouseup = function () {
document.onmousemove = null;
}
}
// 缩放
function scaleTool(drag, scale, box) {
scale.onmousedown = function (e) {
//阻止冒泡 避免缩放触发移动事件
e.stopPropagation()
// 取消事件的默认动作
e.preventDefault()
// 定义position
var position = {
'w': drag.offsetWidth, // 被缩放元素的offsetWidth
'h': drag.offsetHeight, // 被缩放元素的offsetHeight
'x': e.clientX, // 当前窗口鼠标指针的水平坐标
'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
}
drag.onmousemove = function (ev) {
ev.preventDefault()
// 设置最大缩放为30*30 Math.max取最大值
var w = Math.max(30, ev.clientX - position.x + position.w)
var h = Math.max(30, ev.clientY - position.y + position.h)
// 设置最大的宽高
w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
drag.style.width = w + 'px';
drag.style.height = h + 'px';
}
// 鼠标离开和抬起取消缩放
drag.onmouseup = function () {
drag.onmousemove = null;
drag, onmouseup = null;
}
drag.onmouseleave = function () {
drag.onmousemove = null;
drag, onmouseup = null;
}
}
}
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Webpack打包字体font-awesome的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了ES10 特性的完整指南小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
js 剪切板的用法(clipboardData.setData)与js match函数介绍
这篇文章主要是对js中剪切板的使用方法(clipboardData.setData)与js中的match函数进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了JS实现点击button按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
使用JS打开图片另存为对话框一直都是网页应用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些实现代码，不知道符不符合大众的口味，在此班门弄斧了，需要的朋友可以了解下2012-12-12
这篇文章主要为大家详细介绍了JS仿京东移动端手指拨动切换轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了js使用递归方式获取html页面节点的方法，大家可以参考使用吧2013-12-12
这篇文章主要介绍了JavaScript代码实现微博批量取消关注功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下2016-04-04
最新评论