从头开始使用带有 jquery 的鼠标创建滑块答案

【问题标题】：create a slider using your mouse with jquery from scratch从头开始使用带有 jquery 的鼠标创建滑块
【发布时间】：2011-04-29 05:27:36
【问题描述】：

我正在尝试创建类似于以下内容的滑块：

http://jqueryui.com/demos/slider/

基本上，这个想法与演示中的基本滑块非常相似，只是在您用鼠标抓住以滑动的手柄中，数字会在您到达某些点时发生变化。我想我可以弄清楚数字部分，但我完全不知道如何开始。

我想用 jquery 从头开始...所以没有插件。如果有人知道任何教程，或者我可以从某个地方开始，那就太棒了。

谢谢

【问题讨论】：

标签： jquery html css slider

【解决方案1】：

视情况而定。如果您想获得知识，我建议您查看jQuery UI source code ;)

如果你想这样做是因为 jQuery UI 太“重”，那么仅供参考，你可以customise which parts of it you download/use.

编辑

试试：https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

【讨论】：

我仍然不想使用插件，所以选项 2 已退出。我确实想要知识，但是选项 1 不需要很多代码。我想如果我弄清楚拖放我可以得到大部分...不知道是否有任何教程没有使用任何类型的插件

【解决方案2】：

这就是我所拥有的，并且有效。

//sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 380){
                $('#slider').css('left', 400-20 + "px");    
            }

            $("#slider").text($("#slider").css('left'));

        };


    $(document).mouseup(function(e) {
      $(document).unbind('mousemove', mmHandler);
    });

【讨论】：