在同一元素上实现拖动和调整大小答案

【问题标题】：implementing drag and resize on the same element在同一元素上实现拖动和调整大小
【发布时间】：2017-07-04 20:55:49
【问题描述】：

我正在尝试在同一个元素上实现调整大小和拖动。看看这个：

到目前为止我的代码：

   $('#dragbar').mousedown(function(e){
        e.preventDefault();
        $(document).mousemove(function(e){
          //$('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2-100);
          $('#main').css("left",e.pageX+2);
       });
    });

   $(document).mouseup(function(e){
       $(document).unbind('mousemove');
   });

      $('#sidebar').mousedown(function(e){
        e.preventDefault();
        $(document).mousemove(function(e){
          //$('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("margin-left",e.pageX-100-$('#sidebar').offset().left);
          //$('#main').css("left",e.pageX+2);
       });
    });

这个想法是，如果鼠标在黑线上发生，代码会调整大小。如果鼠标向下在红色矩形上，代码进行水平拖动。

这 2 个事件当前发生冲突，这就是您看到闪烁的原因。知道如何解决这个问题吗？

更新： http://jsfiddle.net/Lo8n75dg/2/ 我添加了 e.stopPropagation() 这部分技巧。不幸的是，由于我不知道的原因，仍然有很多闪烁。

【问题讨论】：

标签： jquery html css resize drag

【解决方案1】：

下面似乎对我有用。请在两个地方都使用它。

$('#sidebar').css("位置","绝对"); $('#sidebar').css("left",);

让我知道它对你的影响:)

【讨论】：

【解决方案2】：

为防止鼠标移动冲突，您可以存储当前正在拖动的块。

const resizebar = {
  node: wrap.querySelector('.resizebar'),
  isDragged: false,
}
const dragbar = {
  node: document.querySelector('.dragbar'),
  width: 200,
  x: 0,
  isDragged: false,
}

另外我认为你代码中的闪烁是由margin-left的计算引起的

我尝试在原生 js 中制作几乎相同的块 - https://jsfiddle.net/Ellaylone/48h5L8t1/

【讨论】：