jquery - jQuery 拖拽鼠标

Question

我正在尝试在中心创建一个带有拖动条的两列可滑动区域，请参阅此小提琴：http: //jsfiddle.net/W7tGj/2/

我试图避免将 jQ-UI 添加到组合中，因此将不胜感激。我觉得我错过了一些简单的东西。

Answer 1

首先： - 添加容器 div 以检查 mousemove

<div id="content-div">
  <div id="left-panel">f</div>

  <div id="drag-bar">f</div>

  <div id="right-panel">f</div>
</div>

第二： - 将 mousemove 事件添加到 div 容器中

var movebar = false; 

$('#drag-bar').mousedown(function(e){
    movebar = true;
});

$('#drag-bar').mouseup(function(e){
    movebar = false;
});

$('#content-div').mousemove(function(e){
    if(movebar)
    {
        var x = e.pageX;
        $('#left-panel').css({'width': x+'px'});
        $('#right-panel').css({'margin-left': (x+5)+'px'});
    }
});

Answer 2

尝试这种方式，http://jsfiddle.net/W7tGj/6/，虽然它仍然不支持拖动，但当鼠标按下时它确实做了正确的事情