需求为给某个弹窗增加拖动效果，若加到整个弹窗会影响弹窗内的滑动条滑动，因此给弹窗头部元素增加一个拖动监听来带动整个元素移动。
效果图：
代码：
<!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>定制化拖动</title>
</head><body><div class="main"><div class="title" id="title">我是头部</div><div class="content">我是内容</div></div>
</body>
<script>//定制化拖动function positionChange() {// 获取拖动时点击的元素（子div）const el = ElementById('title');//获取拖动时移动的元素（父div）let p_el = el.parentElement;//添加鼠标按下监听事件ElementById('title').addEventListener('mousedown', function (e) {var disx = e.pageX - p_el.offsetLeft;var disy = e.pageY - p_el.usemove = function (e) {p_el.style.left = e.pageX - disx + 'px';p_p = e.pageY - disy + 'px';el.style.cursor = 'grabbing';}useup = function () {usemove = useup = null;el.style.cursor = 'grab';}}, true);}positionChange()
</script>
<style>.main {width: 300px;height: 500px;background: red;position: absolute;top: 0;left: 0;}.title {width: 300px;height: 200px;background: blue;color: chartreuse;position: relative;}.content {width: 300px;height: 300px;background: yellow;color: red;}
</style></html>本文发布于:2024-01-31 00:25:19，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170663192223914.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
