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

Question

May be this is small question. But I couldn't found reason for this. I made a script to change a position of div by dragging it. the code is working fine with chrome browser. but when I trying to test it on Firefox it is not working.

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>

You can drag it through Y axis by click and drag from blue div. I don't know the reason or I couldn't find a way to fix this work on Firefox. Please help me!

there is error saying _Reference Error: event is not defined_ — Mhd Alaa Alhaj, Nov 23 '17 at 06:09
^... Beacause the global event object is not supported in FF, pass the event object instead. Also `unselectable` is more or less an ancient IE relict, not working in any other browser. — Teemu, Nov 23 '17 at 06:13
Just out of curiosity, where have you learned to use the global event object? Is there one or more online articles teaching to use it? It never has been a part of the standard, and has been supported even in Chrome for a relative short time. — Teemu, Nov 23 '17 at 06:18
@Teemu : I found it on a internet (I didn't remember the site). And is there any method that we can use for make div unselectable insted of using `unselectable`. — Vikum Dheemantha, Nov 23 '17 at 06:33
https://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable — Teemu, Nov 23 '17 at 06:42

score 2 · Accepted Answer · answered Nov 23 '17 at 06:13

You have to catch the (mousemove or mousedown) events as the input of wrapped functions

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 script that only work on chrome, not working in Firefox. (Script for dragging div)

1 Answers1