使用jquery从头开始使用鼠标创建滑块

Question

我想创建一个类似于:

的滑块http://jqueryui.com/demos/slider/

基本上，这个想法与演示中的基本滑动条非常相似，除了在你用鼠标抓取滑动的手柄中将是当你到达特定点时改变的数字。我想我能算出数字部分，但我完全不知道如何开始。

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

谢谢

Answer 1

看情况。如果你想学习，我建议你看一下jQuery UI的源代码;)

如果你想这样做，因为jQuery UI太"沉重"，那么供参考，你可以自定义下载/使用它的哪些部分。

编辑

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

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