对于在scroll的容器中，自由拖拽移动元素位置的解决办法

最新推荐文章于 2025-06-21 16:41:01 发布

原创最新推荐文章于 2025-06-21 16:41:01 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

原生js 专栏收录该内容

14 篇文章

订阅专栏

核心问题在于如何在scroll中获得准确位置
首先被容器relative,拖拽的元素肯定absolute.鼠标上下拖拽，改变元素的top值。

1.获取鼠标位置
2.获取当前元素距离容器顶端的相对位置
3.获取父元素位置（因为父元素可能不是页面最上面）

第二步最复杂，因为容器是有scroll的。

这个图片红线框中的位置注意看

上图的红框区域不见了，但是绝对定位还是需要知道

最后元素实时top为 deltaY(鼠标的值)-wrapTop(父容器到顶部距离)+wrapScroll(相对位置）

注意getBoundingClientRect的使用

附代码。


	//.main是容器
	//TARGET是通过拖拽事件获取的需要改变位置的元素本身
	//e是鼠标事件对象。

	const TARGET = e.target;
    const sectionEl = document.querySelectorAll('.canvas > section')[0];
    const preBoundingClientRect = sectionEl.getBoundingClientRect()

    //因为绝对定位只能参照上一层，特别麻烦。
    TARGET.style.top = e.clientY-$('.main')[0].offsetTop+(100-preBoundingClientRect.top)+'px';