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

Question

我正在尝试在同一个元素上实现调整大小和拖动。检查一下:

http://jsfiddle.net/Lo8n75dg/

到目前为止我的代码:

   $('#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

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

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

让我知道你的结果如何:)