I found a couple similar questions, but all were related to buttons. This is a little different. In the example below, I get a mouseup after a mousedown on a non-image element. However, when I mousedown an image element, I never receive the event.

$(document).on('mousedown','.draggable', function() {
  console.log("Clicked " + $(this).data('type'));
});

$(document).on('mouseup','.dropzone', function(e) {
  console.log("Dropped");
});

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src=".1.1/jquery.min.js"></script>
<img class="draggable il" data-type="image" src=".png">
<div class="draggable il" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

I found a couple similar questions, but all were related to buttons. This is a little different. In the example below, I get a mouseup after a mousedown on a non-image element. However, when I mousedown an image element, I never receive the event.

$(document).on('mousedown','.draggable', function() {
  console.log("Clicked " + $(this).data('type'));
});

$(document).on('mouseup','.dropzone', function(e) {
  console.log("Dropped");
});

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" data-type="image" src="https://imgur./xTFOquF.png">
<div class="draggable il" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

How can I make it so I get a mouseup event after a mousedown on the image?

• javascript
• jquery

Share Improve this question Follow asked May 3, 2018 at 19:08 user736893user736893

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Instead of using mouseup, use html drag and drop, which was built for this purpose. All your draggable elements must have draggable=true set and you need to prevent default on the dragover and drop events.

$(".draggable").on('mousedown', function(e) {
  console.log("Clicked " + $(this).data('type'));
});

$(".dropzone").on('drop', function(e) {
  e.preventDefault();  
  console.log("Dropped");
});

$(".dropzone").on('dragover', function(e) {
  e.preventDefault();  
});

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" draggable="true" data-type="image" src="https://imgur./xTFOquF.png">
<div class="draggable il" draggable="true" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

If you need to use mouseup, you can just use e.preventDefault() on the mousedown event, but this will also prevent your browser from showing the drag.

$(document).on('mousedown','.draggable', function(e) {
  e.preventDefault();
  console.log("Clicked " + $(this).data('type'));
});

$(document).on('mouseup','.dropzone', function(e) {
  console.log("Dropped");
});

.dropzone {
 height: 100px;
 width: 200px;
 border: 1px solid blue;
 text-align: center;
}

div {
user-select: none;
}

.il {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="draggable il" data-type="image" src="https://imgur./xTFOquF.png">
<div class="draggable il" data-type="text">No, drag me!</div>
<div class="dropzone il">Drop stuff here</div>

You can also set draggable=false on the image to have this same effect