19

i came across a bug for Chrome and Opera and i would like to know if its known and if so, is there a solution?

If i change the DOM on the dragstart event it immediately fires the dragend event?! Is this a bug or is there some reason behind it? Only happens in Chrome and Opera. Firefox works.

I appreciate every answer.

$('body').on({
      dragstart: function(e) {
        
        dragProfilefieldSrcElformid = $(this).attr("data-profilefieldid-formid");
        e.dataTransfer = e.originalEvent.dataTransfer;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', $(this).attr("data-profilefieldid"));
        
        // Changing the DOM, fires the dragend Event in Chrome?
        $("#plugin_loginlogout_pfcontainer_" + dragProfilefieldSrcElformid).find(".plugin_loginlogout_pf_entryfield").addClass("highlight"); // This doesn't work in Chrome and Opera, but in Firefox
      },
      dragend: function() {
        console.log("dragend");
      }
      ".plugin_loginlogout_pf");

Edit:

Putting the DOM Change in a setTimeout Function seems to solve the problem!

4
  • Can someone confirm that this is a bug or normal behavior? It seems to affect Firefox too.
    – thelolcat
    Commented Jan 5, 2016 at 16:42
  • @thelolcat Possible dup of stackoverflow.com/a/15114255/2646526? JQuery docs talk about using dragstop, not dragend. So there is no defined behavior in jQuery for handling dragend.
    – heenenee
    Commented Jan 5, 2016 at 17:06
  • is $("#plugin_loginlogout_pfcontainer_" + dragProfilefieldSrcElformid) inside your dragged element or on somewhere else?
    – sulest
    Commented Jan 6, 2016 at 17:25
  • What is ".plugin_loginlogout_pf" after dragend function? Commented Jan 6, 2016 at 19:10

6 Answers 6

16
+200

It seems that different browsers manifest different behaviors towards long running operations.

JavaScript has a single thread that runs all of your instructions in the same queue. Each queue item is run in sequence and once the item has finished execution, the next item (from the queue) is grabbed and run.

The culprit for long running operation is the change you try to bring to the DOM (which I assume is preceded by a heavy search using find() that will run the DOM manipulation for each matched element).

What happens as you drag the element is that, all lines of code in the dragstart handler, and as you stop dragging, the dragend handler are pushed to the message queue respectively in order to be executed serially. However the DOM manipulation is taking more time (probably a few milliseconds more) to execute than the execution of the dragend handler before you stop dragging, and therefore, it appears as if the dragend fired way too soon.

Note: Sometimes block(s) of code create a new event and hence are pushed to the end of the browser event queue (or maybe somewhere after the item that's being run), resulting in a later execution. (I suppose the nature of it differs from browser to browser.)

The DOM manipulation part of your code might face such an issue in Chrome and Opera, though I'm not sure.

The setTimeout(fn, 0) Trick

The workaround for such situations is to wrap the long running operation block in a setTimeout function with 0 time.

(You can think of this as telling the browser to run the part of your code, in no time at all!, not literally though.)

Once a block of code has done execution, the browser will search for the available items waiting to be run, and the ones with setTimeout or setInterval will be pushed to the queue upon first available moment.

In your particular case, the trick is that setTimeout defers the execution of DOM change to a later time (at least 0 seconds) than the dragend event handler, thereby giving the impression as if the dragend event fired after the DOM change.

There is a great post by @DVK here explaining why setTimeout(fn, 0) is sometimes useful. Do check the JSfiddle by him (in Chrome) as well.

Update

As pointed by @MojoJojo and @Pradeep, it seems that Webkit browsers (older versions of Chrome in particular) have an issue with drag events. However, I tried to reproduce the bug in Chrome Version 47.0.2526.106 (newest version as of 11th January 2016), and the drag events fired without any irregularities.

Anyway, even if there was a bug, the setTimeout trick still applies as a proper workaround for the issue.

1
  • setTimeout() workaround is buggy in Firefox, see my answer for a more stable alternative. Commented Jul 6, 2017 at 7:45
3

Just try putting your DOM manipulation in drag event of dragstart instead :)

1
  • Can confirm that manipulating the DOM (in the subtree of the currently being dragged element) triggers a dragabort within modern Chrome at least & Vue@2. Moving the manipulation to the drag event helped, thanks! We were changing the DOM (basically hiding elements -not via opacity though!- to make drag and drop operations easily in a possibly long list/tree w/ possibly deep expanded items) in dragstart. Adding another operation to maintain state (basically a flag to signify that a drag is ongoing) within drag, as well as dragleave & dragabort was the missing piece of the puzzle.
    – Dr1Ku
    Commented Jan 15 at 10:58
1

I think this is a glitch/bug or else we can say this is how browser work since we are doing the DOM manipulations which may lead to repaint the entire DOM again,manipuating DOM in the dragStart event is causing this problem,shift DOM manipulation to dragEnter may solve the issue.

The other solution could be setting the setTimeout which you already mentioned.

1

This does seem like a an issue in Chrome https://groups.google.com/a/chromium.org/forum/?fromgroups=#!msg/chromium-bugs/YHs3orFC8Dc/ryT25b7J-NwJ

What version of Chrome are you using?

0

without jquery works

    var draggable = document.getElementById('draggable'),
      test = document.getElementById('test');

    document.addEventListener("dragend", function(event) {
      // reset the transparency
      console.log('dragend');
    }, false);

    draggable.addEventListener('dragstart', function(event) {
      test.style.color = 'red';
      draggable.style.backgroundColor = 'gray';
    }, false);

http://jsfiddle.net/nwkv75ot/4/

0

I found the setTimeout() workaround to be very buggy in Firefox. For example, when you immediately release the mouse button after dragging, the context within the dragstart might be no longer accesible and the script can crash. Especially when used in combination with the dragend event.

I created the following procedure which gave much more reliability to my script:

$('html').on('dragstart', '.somelement', function(e){

    // Bind 'drag' event only once (gets triggered every 350ms)
    $('html').one('drag', function(){
         // modify DOM here
    });
});

$('html').on('dragend', '.somelement', function(e){

    // Edge might fire 'dragend' before executing the 'drag' event within 'dragstart'
    $('html').unbind('drag');

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.