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

Question

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

Answer 1

//鼠标按下事件  定时器判断点击时间超过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;
    }

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