通过滚动移动DIV

Question

我正在创建一个jQuery滚动条，用于滚动<div>中的内容。它类似于jQuery ScrollPane。

我已经到达了需要移动滚动按钮的点。我的问题是：没有任何UI插件，最好的方法是什么？因此，当用户单击滚动按钮时，可以通过mousedown事件在其父容器中垂直移动。我该如何做到这一点？

- user833451

---

我知道你写了不想使用UI插件，但为什么？ui-draggable看起来正是你需要的东西。http://jqueryui.com/demos/draggable/#constrain-movement - Andy

这是我的客户的要求。脚本必须是“轻量级”的，易于配置的，独立的脚本。 - user833451

Answer 1

以下是一个起点，希望这正是您所需要的：

这里是一个起点，希望这是您需要的：

$(function() {
    $('.slider').slider();
});

$.fn.slider = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css('top', 0);
        var dragging = false;
        var startY = 0;
        var startT = 0;
        $el.mousedown(function(ev) {
            dragging = true;
            startY = ev.clientY;
            startT = $el.css('top');
        });
        $(window).mousemove(function(ev) {
            if (dragging) {
                // calculate new top
                var newTop = parseInt(startT) + (ev.clientY - startY);
                
                //stay in parent
                var maxTop =  $el.parent().height()-$el.height();          
                newTop = newTop<0?0:newTop>maxTop?maxTop:newTop;
                $el.css('top', newTop );
            }
        }).mouseup(function() {
            dragging = false;
        });
    });
}

.container{
    position:relative;
    border:1px solid red;
    height:100px;
}
.slider{
    height:20px;
    width:20px;
    background:green; 
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="container">
    <div class="slider" />
  </div>
</div>
<br/>
<div class="container">
  <div class="slider" />
</div>

- Andy

---

太棒了！超出预期！你还展示了如何将其转换为具有补充CSS类的jQuery可重用函数，以便轻松重复使用。我将其扩展为在X和Y方向上工作，这需要我在CSS中为滑块类添加top: 0和left: 0，因为left默认为“auto”，无法进行计算，所以在我这样做之前它不起作用。谢谢！！ - clearlight

Answer 2

我使用纯JavaScript开发了一个右侧导航栏式的项目。以下是链接：https://github.com/developerDoug/HtmlJavascriptDockInVS2010。

如果你能说服客户，最好使用UI插件。否则，你需要关注处理mousedown或类似事件以注意到移动已经开始。然后，需要关注三种方法：mousedown、mousemove和mouseup。

例如，如果在某个div上检测到mousedown，你可以调用一个函数，该函数基本上将成为您的beginDrag，获取x y坐标，保留对起始坐标的引用，attachEvent（如果是IE），addEventListener（适用于所有其他浏览器）。

示例：

// keep reference to drag div
_dragObj = new Object();

$("myDragDiv").mousedown(function(e) {
    dragBegin(e);
}

function dragBegin(e) {

    _dragObj = document.getElementById('myDragDiv');

    var x, y;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    } else {
        x = e.clientX + window.scrollX;
        y = e.clientY + window.scrollY;
    }

    _dragObj.cursorStartX = x;
    _dragObj.cursorStartY = y;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        document.attachEvent("onmousemove", dragContinue);
        document.attachEvent("onmouseup", dragEnd);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    } else {
        document.addEventListener("mousemove", dragContinue, true);
        document.addEventListener("mouseup", dragEnd, true);
        e.preventDefault();
    }
}

function dragContinue(e) {
    var x, y;

    var isIE = _browser.isIE;
    var isWebKitBased = _browser.isWebKitBased;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    } else {
        x = e.clientX + window.scrollX;
        y = e.clientY + window.scrollY;
    }

    var distance = x - _dragObj.cursorStartX;

    distance = Math.abs(distance);

    // or top, bottom, right
    _dragObj.elNode.style.left = (_dragObj.elStartLeft + x - _dragObj.cursorStartX) + "px";

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    } else {
        e.preventDefault();
    }
}

function dragEnd() {
    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        document.detachEvent("onmousemove", dragContinue);
        document.detachEvent("onmouseup", dragEnd);
    } else {
        document.removeEventListener("mousemove", dragContinue, true);
        document.removeEventListener("mouseup", dragEnd, true);
    }
}

- user619891

---

请注意：我拿了我的例子，并尽力将其调整为适合您的例子。可能需要微调。 :) - user619891

+1 因为提问者显然不够在意，甚至没有回应。 - Andy