父元素中拖动子元素实现

结果

过程

鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息
子元素要在父元素范围内拖动，那就有一个允许拖动的范围，子元素本身有宽高，这也是拖动范围计算要考虑的
首先获取mousedown的点相对于子元素边界的距离

上面计算得到的距离也作为子元素边界到容器边界的距离极值
mouseBounds得到的结果为鼠标相对于浏览器可以移动的范围
因父元素相对于浏览器窗口还有一个相对的距离，为上面的offsetX、offsetY

上面的计算内容当按下点在前面计算得到范围内的判断，如果在超出范围则赋予对应的极值，最后结果还要减去父元素相对于浏览器的偏移值

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>html,body,.father {margin: 0;height: 100%;width: 100%;}body{display: flex;justify-content: center; align-items: center;}.contain{ position: relative; height: 90%;width: 90%;border: black 1px solid;background-color: rgba(205, 135, 222, 0.767);}.child {position: absolute;height: 200px;width: 200px;border: black 1px solid;background-color: coral;}</style></head><body><div class="contain"><div id="father" class="father"><divid="child"class="child"onmousedown="mouseDown(event)"></div></div></div><script>let child = document.querySelector('#child')const mouseDown = evt => {let mBounds = mouseBounds(evt,child.getClientRects()[0],document.querySelector('#father').getClientRects()[0])document.onmousemove = function(ev) {let pt = calcPositon(ev, mBounds)child.style.left = pt.left + 'px'child.style.top = pt.top + 'px'child.style.opacity = 0.9child.style.cursor = 'move'}document.onmouseup = function() {document.onmousemove = nulldocument.onmouseup = nullchild.style.opacity = 1child.style.cursor = 'default'}}const calcPositon = (pt, bounds) => {const left =(pt.x > bounds.left && pt.x < bounds.right? pt.x: pt.x >= bounds.right? bounds.right: bounds.left) - bounds.offsetXconst top =(pt.y > bounds.top && pt.y < bounds.bottom? pt.y: pt.y >= bounds.bottom? bounds.bottom: bounds.top) - bounds.offsetYreturn { left, top }}/*** 鼠标可以移动的范围* pt:鼠标按下的点* compRact：要移动组件的矩形对象* containerRact：容器的矩形对象* return 的范围为浏览器窗口中的范围*/const mouseBounds = (pt, compRact, containerRact) => {return {left: containerRact.left + (pt.x - compRact.left),right: containerRact.right - (compRact.right - pt.x),top: containerRact.top + (pt.y - compRact.top),bottom: containerRact.bottom - (compRact.bottom - pt.y),offsetX: containerRact.left + (pt.x - compRact.left),offsetY: containerRact.top + (pt.y - compRact.top)}}</script></body>
</html>

父元素中拖动子元素实现相关推荐

清除元素中的子元素html_HTML中的元素简介
清除元素中的子元素html An element is a fundamental component that is used to develop web pages. Generally an ...
vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
CSS垂直方向布局中，子元素溢出父元素，如何处理？
默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,就是设置多少就是多少子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出, 使用overflow属性设置 ...
JQuery选择器中的子元素选择器
子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点,其实博主感觉并不怎么难啦,因为单词so easy,哈哈. 我们来看看都有哪些吧: 注意: 1. :first只匹配一个单独的元素,但是 ...
CSS实现父元素半透明，子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
jq获取父元素下的子元素
导入jq库通过parent获取父元素 children获取子元素 $(".make-order").click(function(e) {var theli =$(this).p ...
Vue中v-for必须在vue实例对应元素下的子元素中循环渲染数据
异常信息 Cannot use v-for on 1 stateful componentroot element because it renders multiple elements 翻译大意: ...
js 获取元素，同级元素下的子元素总结
太原总结不慌不慌,来日方长 ** 1.获取同级元素 form 下的 div 元素下的 input标签的value值 ** //html代码 <div id="replySubmit& ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...

父元素中拖动子元素实现

结果

过程

代码

父元素中拖动子元素实现相关推荐

最新文章

热门文章