JavaScript 脚本仅适用于 chrome，不适用于 Firefox。（拖动脚本div）

Question

可能这是个小问题。但是我找不到原因。我制作了一个脚本来通过拖动来改变 div 的位置。该代码在 chrome 浏览器中运行良好。但是当我尝试在 Firefox 上测试它时它不起作用。

var h = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
        window.onload = function () {
// ------------------lock the div with mouse pointer--------------


// variable dragged is for identified that you are click on the button or not
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
            if (boxElement) {
// -----------------check whether the title div is holding by the mouse to lock it with mouse-------
 drgElement.addEventListener('mousedown', function() {
     dragged = true;
        pointerDis = event.clientY -  parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));

});
//------------------check whether the title div is released to drop the div-------------------------
 document.addEventListener('mouseup', function() {
 dragged = false;
});
    document.addEventListener('mousemove', function () {
        y = event.clientY;
     if(dragged == true)
     {
            y = y -pointerDis;
            if(y<0)
            {
                y = 0;
            }
            else if(y > window.innerHeight - boxElement.offsetHeight)
            {
                y = window.innerHeight - boxElement.offsetHeight;
            }
      boxElement.style.top = y + 'px';
     }
    });
 }
};

.drg {
   position: absolute;
   top:0;
   right: 0;
   background: red;
   border-top-left-radius: 45px;
   border-bottom-left-radius: 45px;
  }
  #titl{
   background: blue;
   width: 50px;
   text-align: center;
   color: white;
   font-size: 30px;
   border-top-left-radius: 10px;
  }
  #det{
   background: #f9c500;
   width: 50px;
   border-bottom-left-radius: 10px;
   text-align: center;
  }

<!DOCTYPE html>
<html>
<head>
 <title>test 4</title>
</head>
<body>
<div class = "drg" id="drag">
 <div id="titl" unselectable="on" onselectstart="return false;">....</div>
 <div id="det">this is the details menu</div>
</div>
</body>
</html>

您可以通过单击并从蓝色拖动来沿 Y 轴拖动它 div。我不知道原因，或者我找不到在 Firefox 上修复这项工作的方法。请帮助我！

Answer 1

您必须捕获（mousemove 或 mousedown）事件作为包装函数的输入

drgElement.addEventListener('mousedown', function(event)...

var h = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
        window.onload = function () {
// ------------------lock the div with mouse pointer--------------


// variable dragged is for identified that you are click on the button or not
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
            if (boxElement) {
// -----------------check whether the title div is holding by the mouse to lock it with mouse-------
 drgElement.addEventListener('mousedown', function(event) {
     dragged = true;
        pointerDis = event.clientY -  parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));

});
//------------------check whether the title div is released to drop the div-------------------------
 document.addEventListener('mouseup', function() {
 dragged = false;
});
    document.addEventListener('mousemove', function (event) {
        y = event.clientY;
     if(dragged == true)
     {
            y = y -pointerDis;
            if(y<0)
            {
                y = 0;
            }
            else if(y > window.innerHeight - boxElement.offsetHeight)
            {
                y = window.innerHeight - boxElement.offsetHeight;
            }
      boxElement.style.top = y + 'px';
     }
    });
 }
};

.drg {
   position: absolute;
   top:0;
   right: 0;
   background: red;
   border-top-left-radius: 45px;
   border-bottom-left-radius: 45px;
  }
  #titl{
   background: blue;
   width: 50px;
   text-align: center;
   color: white;
   font-size: 30px;
   border-top-left-radius: 10px;
  }
  #det{
   background: #f9c500;
   width: 50px;
   border-bottom-left-radius: 10px;
   text-align: center;
  }

<!DOCTYPE html>
<html>
<head>
 <title>test 4</title>
</head>
<body>
<div class = "drg" id="drag">
 <div id="titl" unselectable="on" onselectstart="return false;">....</div>
 <div id="det">this is the details menu</div>
</div>
</body>
</html>

JavaScript 脚本仅适用于 chrome，不适用于 Firefox。（拖动脚本div）

JavaScript script that only work on chrome, not working in Firefox. (Script for dragging div)

html

javascript

css

cross-browser

JavaScript 脚本仅适用于 chrome，不适用于 Firefox。 （拖动脚本div）

JavaScript script that only work on chrome, not working in Firefox. (Script for dragging div)

html

javascript

css

cross-browser

JavaScript 脚本仅适用于 chrome，不适用于 Firefox。（拖动脚本div）