Javascript 通过滚动移动DIV

我正在创建一个jQuery滚动条，它在一个窗口中滚动内容。有点像

---

我现在需要移动滚动按钮了。我的问题是：没有任何UI插件的最佳方式是什么？因此，当用户单击滚动按钮时，它可以通过mousedown事件在其父容器中垂直移动。我怎么能这么做

这里是一个起点，希望这就是你想要的：

$（函数（）{
$（'.slider'）.slider（）；
});
$.fn.slider=函数（）{
返回此值。每个（函数（）{
var$el=$（本）；
$el.css（'top'，0）；
var=false；
var-startY=0；
var-startT=0；
$el.mousedown（功能（ev）{
拖动=真；
startY=ev.clientY；
startT=$el.css（'top'）；
});
$（窗口）.mousemove（函数（ev）{
如果（拖动）{
//计算新顶部
var newTop=parseInt（startT）+（ev.clientY-startY）；
//留在父母家里
var maxTop=$el.parent（）.height（）-$el.height（）；
newTop=newTopmaxTop？maxTop:newTop；
$el.css（“顶部”，新顶部）；
}
}).mouseup（函数（）{
拖动=假；
});
});
}

.container{
位置：相对位置；
边框：1px纯红；
高度：100px；
}
.滑块{
高度：20px；
宽度：20px；
背景：绿色；
位置：绝对位置；
}

我用纯javascript开发了一个右导航坞样式的项目。 以下是链接：

如果你能说服你的客户这样做，使用ui插件将是最好的。如果没有，你需要关注的是汉林·穆斯敦或类似的事情，以便注意到移动已经开始。要重点关注的方法有：mousedown、mousemove、mouseup

例如，如果在某个div上检测到mousedown，则可以调用一个基本上是beginDrag的函数，获取xy坐标，保留对开始坐标的引用，attachEvent（如果IE），addEventListener（对于所有其他浏览器）

例：

---

我知道你写过你不想使用ui插件，但为什么？ui Dragable似乎正是您需要的？这是我的客户的要求。该脚本必须是一个“轻量级”、易于配置、独立的脚本。注意：我以我的示例为例，并尽我所能为您的示例定制它。可能需要调整。：）+1因为提问者显然连回答都不在乎，这太棒了！超越一切！您还展示了如何将其转换为jQuery可重用函数，并带有互补的CSS类，以便于重用。我将它扩展到X和Y方向，这样做需要我在CSS中的slider类中添加top:0和left:0，因为left默认为“auto”，数学无法使用它，所以在我这样做之前它无法工作。谢谢

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