Question

I am far from being an html/javascript expert and I am going crazy around this problem. Did not find anything on the net regarding this, I tried multiple things but without success.

Basically I am using drag functionality to achieve something. I don't really need the drag/drop, what I am just interested in is the drag.

Here is a very very simple sample illustrating my issue :

https://jsfiddle.net/fhdoLz70/2/

The div can be dragged around and I am logging the event.clientX value. The values are correct during the drag, but when I release the mouse, the onDrag event is raised once more with a incoherent clientX value (completely out of bounds, negative value). The same happens for clientY and probably other values associated with the event (not interested in other values but clientX and clientY so I haven't checked).

Why is onDrag raised when the mouse is released ? Drag is over ... And why does it hold such weird values ? How can I avoid to receive this last event on mouse release ?

Thanks a lot.

Answer 1

What you're seeing is an oddity with jsfiddle. The ondrag event will be fired on release, but it typically would return zero. If you took your same code and placed it in a standalone file like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DragTest</title>
    <style>
    .dragDiv {
  width: 100%;
  height: 50px;
  background-color: red;
}
    </style>
  </head>
  <body>
     <div draggable="true" class="dragDiv" ondrag="handleDrag(event)"/>
     <script>
     function handleDrag(evt){
          console.log(evt.clientX);
      }
     </script>
  </body>
</html>

Your console will log a 0 instead of the crazy number. To catch the last event, keep in mind that there is an ondragend event fired on release. You could do handling there.

onDrag event raised with incoherent values when mouse released

1 个答案: