Make it so image doesn't move around when user tries to resize the image

Question

As the title states I want the user to be able to resize an image without the user being able to drag the image around.

I have it so the user can drag the image around so they can overlay on top of each other, but I also want to add the functionality that the user can resize any of the images. I'm doing this through CSS/JS.

My sources for how to drag comes from here: https://www.w3schools.com/howto/howto_js_draggable.asp

My source for how to resize images comes from here: https://jqueryui.com/resizable/

Currently when a user tries to resize the img, the img also gets dragged around.

Example of my problem here: https://jsfiddle.net/3ybsd6rk/1/

 var drag = true; // makes any image resizable on the page $(function() { $("img").resizable(); }); // Make the DIV element draggable // Simple loop that goes through all element ids that start with 'dragId' // (This needs to be the naming convention or this won't work) var dragPrefix = 'dragId'; var el; for (i = 0; el = document.getElementById(dragPrefix + i); i++) { dragElement(el); } function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id)) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id).onmousedown = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; getToTop(); } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; elmnt.style.opacity = "0.5" getToTop(); } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; elmnt.style.opacity = "1.0"; getToTop(); } // Simple function that makes all other drag elements 1 and the one in 'focus' 5 which will make it // hover over the other elements function getToTop() { for (i = 0; el = document.getElementById(dragPrefix + i); i++) { el.style.zIndex = "1"; } elmnt.style.zIndex = "5" } }

 .drag_img { position: absolute; display: inline-block; } #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; border: 1px solid #d3d3d3; text-align: center; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 1

Right now both resizing and drag is executing at the same time causing the conflict. I think your direction on the flag is correct but resizing has a threshold so the events start and stop will be delayed compared to drag thus drag still happens first. The best option is to bind to the resizing handles so that when the user is operating the resizer the drag is disabled.

Creating a flag whenever the user's mouse is down on the handlers:

$("#mydivheader").resizable({
  create: function(e, ui) {
    $('.ui-resizable-handle')
        .on('mousedown', function() {
        resizing = true;
      })
        .on('mouseup', function() {
        resizing = false;
      });
      
  }
});

https://jsfiddle.net/jo9m2phb/1/