jQuery拖动鼠标 [英] jQuery Drag and Follow Mouse

问题描述

我正在尝试创建一个两列可滑动区域，中间有一个拖动条，请看这个小提琴： http://jsfiddle.net/W7tGj/2/

I'm trying to create a two-column slideable region with a drag-bar in the center, see this Fiddle: http://jsfiddle.net/W7tGj/2/

我试图避免添加jQ-UI到组合，所以任何帮助将不胜感激我觉得我错过了一些简单的东西。

I'm trying to avoid adding jQ-UI to the mix, so any help would be appreciated. I feel like I'm missing something simple.

推荐答案

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

First : - add container div to check 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容器中

Second : - add mousemove event into div container

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'});
    }
});

这篇关于jQuery拖动鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！