js拖拽遇到的问题，待解决

女爷i 2022-07-28 04:13 169阅读 0赞

以下拖拽代码，遇到一个问题，点击拖拽狗狗后，鼠标松开，继续移动鼠标，狗狗仍是被拖拽状态，得再次点击鼠标，释放拖拽事件。  
我百思不得其解，猜测是不是document.onmouseup没有准确的检测鼠标的释放，诶，不知道

window.onload = function() { 
        drag();
    }
    
    function drag() { 
        var oDog = document.getElementById("dog");
        oDog.onmousedown = fnDown;
    }
    
    function fnDown(event) { 
        event = EventUtil.getEvent();
        var oDog = document.getElementById('dog'),
            disX = event.clientX - oDog.offsetLeft,
            disY = event.clientY - oDog.offsetTop;
    
        document.onmousemove = function(event) { 
            if (oDog.onmousedown) {
                fnMove(event, disX, disY);
            }
        }
        document.onmouseleave = document.onmouseup = function() { 
            document.onmousemove = null;
            document.onmouseup = null;
        }
        document.onmouseup = function() { 
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
    
    
    function fnMove(e, posX, posY) { 
        var oDog = document.getElementById('dog'),
            l = e.clientX - posX,
            t = e.clientY - posY,
            winW = document.getElementById("backhome").offsetWidth,
            winH = document.getElementById("backhome").offsetHeight,
            maxW = winW - oDog.offsetWidth,
            maxH = winH - oDog.offsetHeight;
        if (l < 0) {
            l = 0;
        } else if (l > maxW) {
            l = maxW;
        }
        if (t < 0) {
            t = 0;
        } else if (t > maxH) {
            t = maxH;
        }
        oDog.style.left = l + 'px';
        oDog.style.top = t + 'px';
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 拖拽事件

1.drag等拖拽事件 > 拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：被拖动元素相关事件:

蔚落/ 2024年03月02日 10:40/ 0 赞/ 66 阅读

相关兼容火狐拖拽(项目中遇到的问题)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0

末蓝、/ 2023年06月16日 10:59/ 0 赞/ 3 阅读

相关 js拖拽

拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

怼烎@/ 2023年06月09日 04:59/ 0 赞/ 9 阅读

相关 JS 拖拽窗口的实现

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3dmMTIyNQ_size_20_color

爱被打了一巴掌/ 2022年09月11日 02:28/ 0 赞/ 219 阅读

相关 js拖拽遇到的问题，待解决

以下拖拽代码，遇到一个问题，点击拖拽狗狗后，鼠标松开，继续移动鼠标，狗狗仍是被拖拽状态，得再次点击鼠标，释放拖拽事件。我百思不得其解，猜测是不是document.onmo

女爷i/ 2022年07月28日 04:13/ 0 赞/ 170 阅读

相关 JS——拖拽封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年06月03日 04:54/ 0 赞/ 258 阅读

相关 JS 拖拽

实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

╰半夏微凉°/ 2022年05月22日 08:50/ 0 赞/ 327 阅读

相关 JS基础-事件的拖拽

1.事件的拖拽拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。（onmousedown）;2.当鼠标移动时被拖拽的元素随鼠标移动。(onmousemove);3.当鼠

缺乏、安全感/ 2022年04月23日 09:02/ 0 赞/ 250 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 475 阅读

相关 js拖拽封装

废话不多说，直接上代码： drag: function (id) { let isDown = false; let

雨点打透心脏的1/2处/ 2021年09月19日 15:02/ 0 赞/ 429 阅读