Javascript 使图像不会'；当用户尝试调整图像大小时，请不要四处移动

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

我有这样的功能，用户可以拖动图像，这样他们就可以相互叠加，但我还想添加用户可以调整任何图像大小的功能。我是通过CSS/JS来实现的

我关于如何拖动的来源如下：

有关如何调整图像大小的信息来源于：

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

我的问题示例如下：

var-drag=true；
//使页面上的任何图像都可以调整大小
$（函数（）{
$（“img”）.resizeable（）；
});
//使DIV元素可拖动
//通过以“dragId”开头的所有元素ID的简单循环
//（这必须是命名约定，否则将不起作用）
var dragPrefix='dragId'；
var-el；
对于（i=0；el=document.getElementById（dragPrefix+i）；i++）{
排水管（el）；
}
功能牵引装置（elmnt）{
var pos1=0，
pos2=0，
pos3=0，
pos4=0；
if（document.getElementById（elmnt.id））{
//如果存在，则标题是从中移动DIV的位置：
document.getElementById（elmnt.id）.onmousedown=dragMouseDown；
}否则{
//否则，请从DIV内的任何位置移动DIV：
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
gettop（）；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//设置元素的新位置：
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
elmnt.style.opacity=“0.5”
gettop（）；
}
函数closeDrageElement（）{
//释放鼠标按钮时停止移动：
document.onmouseup=null；
document.onmousemove=null；
elmnt.style.opacity=“1.0”；
gettop（）；
}
//简单的函数，使所有其他拖动元素1和“焦点”5中的一个将使其
//将鼠标悬停在其他元素上
函数gettop（）{
对于（i=0；el=document.getElementById（dragPrefix+i）；i++）{
el.style.zIndex=“1”；
}
elmnt.style.zIndex=“5”
}
}

。拖动\u img{
位置：绝对位置；
显示：内联块；
}
#mydiv{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
边框：1px实心#D3；
文本对齐：居中；
}
#mydivheader{
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}

---

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

每当用户的鼠标落在处理程序上时创建标志：

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

---

这不是一个真正的编程问题，而是一个用户体验设计问题。在这种情况下，鼠标按下可能意味着开始调整大小或开始拖动。但是没有程序能够猜出用户想要做什么，所以您要么需要分离触发事件的元素，要么找到一种方法来指示需要哪一个元素。你可以把一个移动图标稍微放在图像的外面，它不受调整大小的影响，然后用它来触发拖动。或者，您可以将调整大小手柄放在图像外部，只通过在图像内部单击来触发移动。但是，假设您需要使用jquery可调整大小的小部件，另一个选项是使用调整大小上的开始/停止事件来启用/禁用拖动。这里有关于事件的文档。然后你可以更新你的函数DrageElement（el）以包含一个布尔值来关闭它。我尝试添加一个标志，当用户调整大小时，它将关闭拖动，但也许我只是js的新手，但我无法让它工作。非常感谢你的帮助。不知道您添加的额外功能是否可能。仍然是js/jquery的障碍