原生js实现小方块拖拽

需求：实现点击一个小方块按下拖拽的功能。

实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html>
<style>.big {width: 500px;height: 500px;left: 50%;top: 50%;transform: translate(-50%, -50%);position: absolute;background-color: #eee;}.small {width: 100px;height: 100px;border: 2px solid black;position: absolute;top: 0;left: 0;background-color: pink;}
</style>
<script>
//获取big
var big = document.querySelector('.big');
var small = document.querySelector('.small');
//监听small的移动
small.onmousedown = function(e) {//鼠标移动事件   必须按下才能触发移动// 当快速的移动鼠标时,由于每移动1px就要重新获取位置的属性值,还需要不停的计算,此时会出现// 计算误差,会造成鼠标移动时不在box事件源上,脱离box,不执行移动事件// 解决方案: 将移动事件绑定在document上,不会出现脱离事件源的现象document.onmousemove=function(e){//计算移动的距离let movex=(e.clientX-big.getBoundingClientRect().left)-small.offsetWidth/2let movey=(e.clientY-big.getBoundingClientRect().top)-small.offsetHeight/2//边界判断movex<0 ? movex=0 : movex>big.offsetWidth-small.offsetWidth ? movex=big.offsetWidth-small.offsetWidth : movex=movexmovey<0 ? movey=0 : movey>big.offsetHeight-small.offsetHeight ? movey=big.offsetHeight-small.offsetHeight : movey=moveysmall.style.left=movex+'px'small.style.top=movey+'px'}//监听鼠标抬起small.onmouseup=function(e){document.onmousemove=null}
}</script>

getBoundingClientRect()使用可参考：

getBoundingClientRect获取元素位置以及在Vue中的使用 - 水车 - 博客园

原生js实现小方块拖拽相关推荐

java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
android 浮动按钮拖拽,小程序拖拽浮动按钮
小程序拖拽浮动按钮 2019-5-22 分类: 小程序小程序浮动拖拽按钮不借助movable-area自带的组件,实现拖拽效果 wxml + js: var startPoint; ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
JS实现小方块上下移动
**JS实现小方块上下移动效果图 HTML代码展示 <!DOCTYPE html> <html><head><meta charset="UTF- ...
android allapp图标拖动,RecyclerView 拖拽移动，长按小图标拖拽，侧滑删除
RecyclerView拖拽移动,长按小图标拖拽,侧滑删除长按小图标拖拽.gif 侧滑删除.gif Android RecyclerView出来也很多年了,是非常成熟的控件,Github上工具一堆, ...
仿炫酷头条小视频拖拽动画
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布序言时光荏苒,又是一年高考季,不知不觉中距离高考已经七年过去了,在我眼中依稀能够嗅到那个夏天的味道,朋友的道别,得知成绩后的苦涩, ...
html矢量图对画布的拖拽,原生WebGL如何使用鼠标拖拽画布？
如图,我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑,请问有没有更好的方式用原生WebGL来实现鼠标拖拽画布功能? 拖拽部分代码:gl.canvas.onmousedown = function ( ...
Js实战之实现方块拖拽功能
实现方块的拖拽 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><tit ...
JS C22作业：方块拖拽效果
(1)鼠标移动 document.onmousemove = function(e){var event = e || window.event;console.log(e.pageX + " ...

原生js实现小方块拖拽

原生js实现小方块拖拽相关推荐

最新文章

热门文章