romancekami 2022-03-10 08:55 采纳率: 100%
浏览 48
已结题

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

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

img

  • 写回答

4条回答 默认 最新

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月18日
  • 已采纳回答 3月10日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造
  • ¥15 springboot国际化