Firefox fails to trigger HTML drag event

Question

Firefox fails to trigger HTML drag event

After successfully implementing draggable header columns on a table using Chrome as my browser, I encountered an issue when testing it in Firefox (version 17.0.1). It seems that the drag event does not fire in Firefox, although the dragstart event does. To simplify the problem, I have included the following markup below. In Chrome, the top label updates with each mouse movement during dragging, but in Firefox it remains at 0.

<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table,td,th {
    border: solid thin black;
}
</style>
<script>
    $(document).ready(function() {
        $("th").bind("drag", function(event) {
            $("#lbl").html(event.originalEvent.offsetX);
        });
    });
</script>
</head>
<body>
    <span id="lbl">0</span>
    <table>
        <thead>
            <tr>
                <th draggable="true">Column A</th>
                <th draggable="true">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Four</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

javascript css html firefox

Answer 1

Answer №1

Dealing with this particular challenge in Firefox gave me nightmares. I had to drag a div onto a diary and identify the coordinates of the drop to determine the date and time selected by the user.

To trigger the drag event, I included the following line in the dragstart event handler:

event.dataTransfer.setData('Text', this.id);

The most difficult aspect was figuring out how to obtain the x and y coordinates when the dragging ended, as Firefox does not provide this information in the dragend event handler. I experimented with mouse events as suggested earlier, but realized they only work after the dragend event handler is called. Therefore, I decided to use the dragend event to detect when the user released the div, then utilized the subsequent mouse move event to fetch the coordinates and perform any necessary tasks. This method proved effective across IE, Firefox, and Chrome. Here's the HTML/JavaScript code for a demo:

<div>
<div id="todrag" class="testdiv" draggable="true"><p>Please drag me</p></div>

<div id="destination" class="testdiv"><p>To here</p></div>
<p id="coords"></p>
<p id="compareords"></p>
</div>

<script>
    var down = true;
    var m_xcoordDrag = 0;
    var m_ycoordDrag = 0;
    var m_xcoordMove = 0;
    var m_ycoordMove = 0;
    var m_dragReleased = false;
    var m_coordselement = document.getElementById("coords");
    var m_compareordselement = document.getElementById("compareords");

    function OnMouseMove(e) {
        m_xcoordMove = e.x;
        m_ycoordMove = e.y;
        m_coordselement.innerHTML = e.x + "," + e.y;

        if (m_dragReleased) {
            m_compareordselement.innerHTML = "X:" + m_xcoordDrag + ", " + m_xcoordMove + " Y:" + m_ycoordDrag + ", " + m_ycoordMove;

            m_dragReleased = false;
        }
    }

    dragstart = function(event) {
        event.dataTransfer.setData('Text', this.id);
        stop = false;
    }

    dragend = function(event) {
        m_dragReleased = true;

        m_xcoordDrag = event.x;
        m_ycoordDrag = event.y;
    }

    document.onmousemove = OnMouseMove;

    var toDrag = document.getElementById("todrag");

    toDrag.addEventListener('dragstart', dragstart);
    toDrag.addEventListener('dragend', dragend);

</script>

I trust that this explanation proves helpful!

Answer 2

Dealing with this particular challenge in Firefox gave me nightmares. I had to drag a div onto a diary and identify the coordinates of the drop to determine the date and time selected by the user.

To trigger the drag event, I included the following line in the dragstart event handler:

event.dataTransfer.setData('Text', this.id);

The most difficult aspect was figuring out how to obtain the x and y coordinates when the dragging ended, as Firefox does not provide this information in the dragend event handler. I experimented with mouse events as suggested earlier, but realized they only work after the dragend event handler is called. Therefore, I decided to use the dragend event to detect when the user released the div, then utilized the subsequent mouse move event to fetch the coordinates and perform any necessary tasks. This method proved effective across IE, Firefox, and Chrome. Here's the HTML/JavaScript code for a demo:

<div>
<div id="todrag" class="testdiv" draggable="true"><p>Please drag me</p></div>

<div id="destination" class="testdiv"><p>To here</p></div>
<p id="coords"></p>
<p id="compareords"></p>
</div>

<script>
    var down = true;
    var m_xcoordDrag = 0;
    var m_ycoordDrag = 0;
    var m_xcoordMove = 0;
    var m_ycoordMove = 0;
    var m_dragReleased = false;
    var m_coordselement = document.getElementById("coords");
    var m_compareordselement = document.getElementById("compareords");

    function OnMouseMove(e) {
        m_xcoordMove = e.x;
        m_ycoordMove = e.y;
        m_coordselement.innerHTML = e.x + "," + e.y;

        if (m_dragReleased) {
            m_compareordselement.innerHTML = "X:" + m_xcoordDrag + ", " + m_xcoordMove + " Y:" + m_ycoordDrag + ", " + m_ycoordMove;

            m_dragReleased = false;
        }
    }

    dragstart = function(event) {
        event.dataTransfer.setData('Text', this.id);
        stop = false;
    }

    dragend = function(event) {
        m_dragReleased = true;

        m_xcoordDrag = event.x;
        m_ycoordDrag = event.y;
    }

    document.onmousemove = OnMouseMove;

    var toDrag = document.getElementById("todrag");

    toDrag.addEventListener('dragstart', dragstart);
    toDrag.addEventListener('dragend', dragend);

</script>

I trust that this explanation proves helpful!

Answer 3

Answer №2

The section that has been removed http://pastebin.com/bD2g3SqL

UPDATE:

This method does function properly, however, I am still unable to access the offsetX and offsetY properties as the Firefox version of the event does not include them for some reason.

<!DOCTYPE html>
<html>
<head>
<title>Drag Test Sample</title>
<style>
table,td,th {
    border: solid thin black;
}
</style>
<script>
    function Initialize(){
        var elements= document.getElementsByTagName("th");
        var counter = 0;

        for (var i=0; i<elements.length; i++){
            elements[i].addEventListener('drag', function (e){
                document.getElementById("lbl").textContent= counter++;
            }, false);
        }

        for (var i=0; i<elements.length; i++){
            elements[i].addEventListener('dragstart', function (e){
                e.dataTransfer.setData('text/plain', 'node');
            }, false);
        }
    }
</script>
</head>
<body onload="Initialize();">
    <span id="lbl"></span>
    <table>
        <thead>
            <tr>
                <th draggable="true">Column A</th>
                <th draggable="true">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Four</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

It seems like you need to "initialize" the drag (source.)

UPDATE 2:

There appears to be a bug in the drag event that doesn't update the clientX and clientY properties (source.) They are updated on different events like the dragover event, but that event only occurs when the object is being dragged over a possible drop target. One way to handle this issue would be something as basic as this:

<!DOCTYPE html>
<html>
<head>
<title>Drag Test Sample</title>
<style>
table,td,th {
    border: solid thin black;
}
</style>
<script>    
    var pressed= false;

    document.onmousemove= OnMouseMove;

    function Initialize(){
        var elements= document.getElementsByTagName('th');

        for (var i=0; i<elements.length; i++){
            elements[i].onmousedown= OnMouseDown;
        }

        document.onmouseup= OnMouseUp;
    }

    function OnMouseDown(e){
        pressed= true;
    }

    function OnMouseUp(e){
        pressed= false;
    }

    function OnMouseMove(e){
        if (!pressed) return;

        document.getElementById('lbl').textContent= e.pageX ? ('x: ' + e.pageX + ' y: ' + e.pageY) : ('x: ' + (e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft) + ' y: ' + (e.clientY + document.documentElement.scrollTop + document.body.scrollTop));
    }

</script>
</head>
<body onload="Initialize();">
    <span id="lbl"></span>
    <table>
        <thead>
            <tr>
                <th draggable="true">Column A</th>
                <th draggable="true">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Four</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 4

The section that has been removed http://pastebin.com/bD2g3SqL

UPDATE:

This method does function properly, however, I am still unable to access the offsetX and offsetY properties as the Firefox version of the event does not include them for some reason.

<!DOCTYPE html>
<html>
<head>
<title>Drag Test Sample</title>
<style>
table,td,th {
    border: solid thin black;
}
</style>
<script>
    function Initialize(){
        var elements= document.getElementsByTagName("th");
        var counter = 0;

        for (var i=0; i<elements.length; i++){
            elements[i].addEventListener('drag', function (e){
                document.getElementById("lbl").textContent= counter++;
            }, false);
        }

        for (var i=0; i<elements.length; i++){
            elements[i].addEventListener('dragstart', function (e){
                e.dataTransfer.setData('text/plain', 'node');
            }, false);
        }
    }
</script>
</head>
<body onload="Initialize();">
    <span id="lbl"></span>
    <table>
        <thead>
            <tr>
                <th draggable="true">Column A</th>
                <th draggable="true">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Four</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

It seems like you need to "initialize" the drag (source.)

UPDATE 2:

There appears to be a bug in the drag event that doesn't update the clientX and clientY properties (source.) They are updated on different events like the dragover event, but that event only occurs when the object is being dragged over a possible drop target. One way to handle this issue would be something as basic as this:

<!DOCTYPE html>
<html>
<head>
<title>Drag Test Sample</title>
<style>
table,td,th {
    border: solid thin black;
}
</style>
<script>    
    var pressed= false;

    document.onmousemove= OnMouseMove;

    function Initialize(){
        var elements= document.getElementsByTagName('th');

        for (var i=0; i<elements.length; i++){
            elements[i].onmousedown= OnMouseDown;
        }

        document.onmouseup= OnMouseUp;
    }

    function OnMouseDown(e){
        pressed= true;
    }

    function OnMouseUp(e){
        pressed= false;
    }

    function OnMouseMove(e){
        if (!pressed) return;

        document.getElementById('lbl').textContent= e.pageX ? ('x: ' + e.pageX + ' y: ' + e.pageY) : ('x: ' + (e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft) + ' y: ' + (e.clientY + document.documentElement.scrollTop + document.body.scrollTop));
    }

</script>
</head>
<body onload="Initialize();">
    <span id="lbl"></span>
    <table>
        <thead>
            <tr>
                <th draggable="true">Column A</th>
                <th draggable="true">Column B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
            </tr>
            <tr>
                <td>Three</td>
                <td>Four</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 5

Answer №3

For Firefox to work properly, it is necessary to set 'init' in the dragstart event so that all subsequent drag events can function correctly.

This requirement may be due to the fact that all DOM elements are automatically set as draggable in XUL. (source: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4)

Here's an example:

<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>

Unlike Firefox, Chrome does not require this type of initialization.

Answer 6

For Firefox to work properly, it is necessary to set 'init' in the dragstart event so that all subsequent drag events can function correctly.

This requirement may be due to the fact that all DOM elements are automatically set as draggable in XUL. (source: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4)

Here's an example:

<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>

Unlike Firefox, Chrome does not require this type of initialization.

Firefox fails to trigger HTML drag event

Answer №1

Answer №2

Answer №3

Similar questions

Classify JavaScript Array Elements based on their Value

How can Bootstrap's Collapse be activated without relying on buttons or anchor tags?

I'm having trouble removing an element from an array. The splice() method doesn't seem to be working properly

Performing asynchronous operations in React with axios using loops

Utilizing Jquery to enhance slide image transitions with navigational links

Exploring the idea of how a Node.js server works

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Activate Keyboard and Background in the Bootstrap Modal

Learn the process of dynamically adding components with data to a list of objects using React JS

The functionality of ellipsis, which consists of three dots, allows the text to expand

Is it possible to utilize Angular's $http.get method with a dynamic route

Transform nested entities into a single entity where any properties that are objects inherit from their parent as prototypes

Pass the values of both buttons to a different page using PHP

Set up a targeted version of the winston software package for installation

Incorporating external CSS links in the metadata of Next.js 13

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Would it be considered acceptable practice to implement a setTimeout on the loading state to ensure that the log in page does not momentarily appear before the user has completed the authentication process?

how to properly position an image using javascript

AngularJS is not displaying the interface changes as expected

Jquery panoramic slider - Dynamically adjusting image width to fit screen size