js能实现向下拖拽页面元素然后返回顶部吗？如图，想问下思路，主要可以用啥实现

js能实现向下拖拽页面元素然后返回顶部吗？如图，想问下思路，主要可以用啥实现，查了一下好像要用draggable？

//鼠标按下事件  定时器判断点击时间超过0.5秒认为是拖拽事件
onMouseDown = (e) => {
        e.stopPropagation();
        let _this = this
        _this.state.timeOutEvent = setTimeout(function () {
            _this.longPress()
        }, 500);
        e.preventDefault();
        var div =  document.getElementById("id")//要拖拽的元素id
        var srcWidth = document.querySelector('body').offsetWidth;
        var srcHeight = document.querySelector('body').offsetHeight;
        document.onmousemove = function (e) {
            clearTimeout(_this.state.timeOutEvent);
            _this.setState({
                timeOutEvent: 0
            })
            var ev = window.event || e;
            var x = ev.clientX;
            var y = ev.clientY;
            // 我的是宽高80px所以减去一半以免拖出屏幕外
            if ((x) >= srcWidth) {
            } else {
                div.style.left = (x - 40) + 'px';
                divs.style.left = (x - 40) + 'px';
            }
            if ((y - 40) >= srcHeight) {
            } else {
                div.style.top = (y - 40) + 'px';
                divs.style.top = (y - 40) + 'px';
            }
            return false;
        }
    }
    //鼠标弹起事件
    onMouseUp = (e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        if (e.target && e.target === document.getElementById("id")) {
            return;
          }
        clearTimeout(_this.state.timeOutEvent);
        document.onmousemove = null;
        return false;
    }

如果帮到你的话请点个采纳~

可以使用动画库 animation

鼠标摁下事件 鼠标抬起事件
判断向下拉动距离 拉动多少对应长度添加多少 抬起的时候写个 setIntval 递减高度 到最初高度时清除setIntval 或者用css的过渡也可以
然后写个 backTop 回滚就好

你可以从这个思路尝试一下
也不会比你引包难太多 滤清思路还是很好写的

1.封装 一个向上 滚动的事件 这个 百度一下就有
2.封装一个 这个 线 被拉动的 动画
3. 监听 鼠标 事件 启动 动画 和滚动事件 拖拽 事件 百度一下也有