Question 216283 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Drag and drop, mouseenter triggered on different element

Based on some fiddle I found (do not remember which anymore, sorry), I created a "Kanban board" where I can drag and drop persons into different blocks. Its a board with tooltip/popups on the persons which is triggered on mouseenter on the person div. After completing it and starting testing, I noticed that sometimes after dropping a person I would get a new popup for a different person. I could not understand why and how and when. So I tried to strip my project into the fiddle below to see if I could figure out why. The fiddle is misbehaving just like my project, only here I just log the mouseenter event.

Sometimes when I take "Person A" and drag it to "Block B" and drop it the fiddle will log a hover on "Person B" afterwards. This does not happen always, though.

To me it might seem that if dragging Person A over Person B, it will trigger a mouseenter on Person B AFTER Person A is dropped. But not always. Maybe the point of drop is important. I just can’t figure out exactly when it happens, but its often.

Edit: to me it seems like the mouse position remains at the point where drag starts. If I immediately after drop move mouse out of the div I’m dragging "real quick", there is a mouseenter on that previous point happening (where now a different div is).

Of course, I just want to remove any mouseenter events when I’m dragging and dropping.

HTML:

<div class="container">
  <div class="board" id="board">

    <div class="block" id="aaa" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block A</strong>
      <div class="person" id="pa" draggable="true" ondragstart="drag(event)"><span>Person A</span></div>
      <div class="person" id="pb" draggable="true" ondragstart="drag(event)"><span>Person B</span></div>
      <div class="person" id="pc" draggable="true" ondragstart="drag(event)"><span>Person C</span></div>
    </div>

    <div class="block" id="bbb" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block B</strong>
    </div>

  </div>
  <textarea id="log" rows="8"></textarea>
</div>

Javascript:

function drag(ev) {
  $("#log").val(""); //reset log on drag
  ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.currentTarget.appendChild(document.getElementById(data));
}

$(document).ready(function() {
  $(document).on("mouseenter", ".person", function() {
    $("#log").val($("#log").val() + "nHover on " + $(this).text());
  });
});

Fiddle: https://jsfiddle.net/60jc17hm/

I’ve only tried to create a test-fiddle I can use to pinpoint when this happens.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Based on @Hordrist answer I ended up with the below. Disable the mouseenter trigger on drag start, and then reinitialize it after mouse moves after drag ends.

    function displayHover(event){
  $("#log").val($("#log").val() + "nHover on " + event.target.innerText);
}

function drag(ev) {
  $("#log").val(""); //reset log on drag
  ev.dataTransfer.setData("text", ev.target.id);
  $(document).off("mouseenter", ".person");
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.currentTarget.appendChild(document.getElementById(data));
}

$(document).ready(function() {
  $(document).on("mouseenter", ".person", displayHover);
  $(document).on("dragend", function(){
    $(document).one("mousemove", function(){
      $(document).on("mouseenter", ".person", displayHover);
    });
  });
});

  2. 0

    I think I managed to work something out.

    function displayHover(event){
    $("#log").val($("#log").val() + "nHover on " + event.target.innerText);
}


$(document).ready(function() {
    $(document).on("mouseenter", ".person", displayHover)
  var was_dragged = false;
  $(document).on("dragend", function(){
    $(document).off("mouseenter", ".person", displayHover)
    $(document).one("mousemove", function(){
        $(document).on("mouseenter", ".person", displayHover);
    })
  });
});

    It worked for me at least…

    I will try to explain, but i’m kind of new to it myself so it will probably be terrible :

    I think the thing is, when you drag an object, you have like a "new mouse" that can drag over objects but not hover them… (I guess in reality it is more technical but it is how I see it as a newbie)

    So when the drag stops (Jquery dragend event), the "old" instance of the mouse (sorry for such vulgarisation) is at the old place (dragstart), hovers over the draggable element below the one you just moved (under person A is person B, at the beginning), then goes to the drop location and hovers the dropped element
    So you hover Person B, then person A, after moving the Person A block

    So i suggest to disable the mouseenter event when you stop a drag action, and reactivate it as soon as the mouse moves.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search