jQuery拖动并跟随鼠标

Question

我正在尝试创建一个带有中心拖动条的两列滑动区域，参见这个Fiddle：http://jsfiddle.net/W7tGj/2/。

我想避免添加jQ-UI，因此任何帮助都将不胜感激。我感觉自己错过了一些简单的东西。

- Fluidbyte

---

我有点让它工作了...如果你在拖动时慢慢移动鼠标，它就能工作。http://jsfiddle.net/W7tGj/2/看看这个：https://dev59.com/DnI_5IYBdhLWcg3wAeA2 - mittmemo

jQ UI可能是最好的选择。还有其他一些插件可以满足你的需求。例如：http://www.methvin.com/splitter/ - Nal

Answer 1

首先： - 添加容器div来检查鼠标移动

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

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

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

第二步：将鼠标移动事件添加到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'});
    }
});

- Rahadyan Permana

---

我曾尝试过类似的事情（检测鼠标按下/松开并设置变量），但错过了将其隔离到容器的步骤。谢谢！ - Fluidbyte

Answer 2

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

- S.831