使用户尝试调整图像大小时图像不会四处移动

Question

正如标题所述，我希望用户能够调整图像大小，而无需用户能够拖动图像。

我有它，所以用户可以拖动图像，这样它们就可以相互叠加，但我还想添加用户可以调整任何图像大小的功能。 我正在通过 CSS/JS 执行此操作。

我关于如何拖动的资源来自这里： https://www.w3schools.com/howto/howto_js_draggable.asp

我关于如何调整图像大小的来源来自这里： https://jqueryui.com/resizable/

当前，当用户尝试调整 img 的大小时，img 也会被拖来拖去。

我的问题示例在这里： 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

现在调整大小和拖动同时执行导致冲突。 我认为您在旗帜上的方向是正确的，但调整大小有一个阈值，因此与拖动相比，事件的开始和停止将被延迟，因此拖动仍然首先发生。 最好的选择是绑定到调整大小的手柄，这样当用户操作调整大小的时候，拖动就被禁用了。

每当用户的鼠标在处理程序上按下时创建一个标志：

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

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