JavaScript code designed specifically for Chrome browser that enables dragging functionality for div elements, unfortunately, it does not function on Firefox

Do you have a moment to help me with a small issue? I created a script that allows you to change the position of a div by dragging it. The script works perfectly in Chrome, but unfortunately, it's not working when I try it in 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>

Try dragging the div along the Y axis by clicking and dragging from the blue div. I'm struggling to figure out why it doesn't work on Firefox. Any insights would be greatly appreciated!

Answer №1

Make sure to capture either the mousemove or mousedown events as inputs for the 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--------------


// set a variable to identify if the button is clicked
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
            if (boxElement) {
// -----------------check whether the title div is being held by the mouse to lock it with the mouse-------
drgElement.addEventListener('mousedown', function(event) {
    dragged = true;
        pointerDis = event.clientY -  parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));

});
//------------------check if 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate text below grid columns in html?

Can you show me how to insert text below a column using the grid system? Here is what I am trying to accomplish Here is the code I have created: .grid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 240px 240px; row-g ...

Develop a line using botbuilder

Good day. I'm currently working on a vue js component that will function as a botbuilder. The main goal is to manipulate the cards displayed on the screen and establish links between them to define the flow of actions. Here's an image for referen ...

Vue: auto-suggest feature in a text input field

I am looking to implement a text field with typeahead functionality. Essentially, I have a collection of words and as you start typing in the field, suggestions should appear based on the input. The challenge is that it should be capable of providing sugge ...

Exploring the process of passing an array as a function argument from PHP to JavaScript

I am looking for assistance in passing an array as a function argument from PHP to JS. The values I need are retrieved from a database. while ($rows = pg_fetch_array($qry)) { ?> <option value="<?php echo $rows[&ap ...

What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by ...

Is there a similar function in PHP to creating an array with a specified number of elements in JavaScript using "new Array(number)"?

While attempting to convert a basic Javascript function into PHP, I encountered a variable declared as var Variable = new Array (13). In PHP, variables are typically declared like this: $variable = array() But what does the "13" in new Array(13) signify? ...

Watchman encountered an error upon initialization

Hi there, I'm encountering an error when trying to start my app with 'react-native start'. Can anyone provide guidance on how to resolve this issue? I attempted changing the permissions of the watchman folder and project folder using chmod - ...

Tips for aligning ticks to the left on a d3 bar chart

i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...

What is the best way to make a panel width adjust automatically to fit the screen width?

I have developed a React/Material UI application that includes a Portal which showcases a Panel and a Widget. Main App: Show Portal and Set Background Color to Blue export default function App() { return ( <div style={{ backgroundC ...

Removing files from Dropzone.js uploaded form

For my project, I am utilizing dropzone.js and faced with the task of deleting files from the plugin upload zone (rather than the server) after they have been uploaded. My goal is to revert back to displaying the "Drop files here or click to upload" text o ...

Ajax is transmitting the data, however, PHP is unable to receive it

I am utilizing the power of ajax to transmit data to a php function. My ultimate goal is to exhibit rows of data based on the variable $tweetdate. Below is the snippet of my ajax script: jQuery('#bootstrapModalFullCalendar').fullCalendar({ d ...

Improving code efficiency for checkboxes in upcoming TypeScript versions

Is it possible to create a single checkbox component and dynamically pass different values to it without repeating code? I have set up these checkboxes to help me check the maximum and minimum values of some API data. const[checkValMax, setCheckValMax]= u ...

Modifying the initialValues prop on a Formik Form does not reflect changes in the input values

Utilizing a Formik form with forward refs in the following manner Form.js import React from "react"; import FormikWithRef from "./FormikWithRef"; const Form = ({ formRef, children, initialValues, validationSchema, onSubmit }) ...

Chrome and FireFox Encounter Ajax Functionality Issues

This script that I have created works flawlessly on Internet Explorer! However, it encounters a few issues when used on Chrome and Firefox. Specifically, it only functions correctly for the first action performed, but fails to do so for subsequent actions. ...

ESLint: The "react" plugin encountered a conflict

In my development environment, I have a React application within a single npm component package. This React app acts as a demonstration site that consumes the component package in addition to Storybook. local-component-package ├── .storybook ├─ ...

Using Vue's $emit method within a Promise

I am currently working on an image upload feature that is based on a Promise. Within the "then" callback, I am attempting to $emit an event named 'success'. Although my VueDevTools shows me that the success event has been triggered, the associate ...

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

Is there a way to transform authorid into postid in order to retrieve author information and store it in my authorDocument array?

**Can you help me troubleshoot why this code is not functioning properly? ** let posts = await postsCollection.aggregate([ {$match: {_id: new ObjectID(id)}}, {$addFields: {authorId: { $toObjectId: "$author"}}}, {$lookup: {from: "user ...

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

Importing the Monday view in React - A step-by-step guide

I am interested in incorporating one of my Monday boards into my React component. Here is a snippet of the code: import React from 'react' import useI18n from 'hooks/useI18n' import Page from 'components/layout/Page' const Ro ...