Question

我正在尝试ti实现调整大小并拖动相同的元素。看看这个：

到目前为止我的代码：

   $('#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（），它可以完成部分操作。遗憾的是，由于我不知道的原因，仍有很多闪烁现象。

Answer 1

下面似乎对小提琴有用。请在两个地方使用。

$（＆＃39;＃侧边栏＆＃39）的CSS。（＆＃34;位置＆＃34;＆＃34;绝对＆＃34）; $（＆＃39;＃侧边栏＆＃39）。CSS（＆＃34;左＆＃34;，）;

让我知道它是如何为您解决的：）

Answer 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/

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

2 个答案: