создать слайдер с помощью мыши с помощью jquery с нуля

Question

Я пытаюсь создать слайдер, похожий на:

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

По сути, идея очень похожа на базовый слайдер в демоверсии, за исключением того, что в ручке, которую вы нажимаете мышью для скольжения, будут цифры, которые меняются при достижении определенных точек. Я думаю, что могу понять часть чисел, но я полностью застрял на том, как начать.

Я хочу сделать это с нуля с помощью jquery ... так что никаких плагинов. Если кто-нибудь знает какие-либо учебные пособия, или где-то я мог бы начать, это было бы здорово.

Спасибо

Answer 1

Зависит. Если вы хотите сделать это для знания, я бы рекомендовал взглянуть на исходный код jQuery UI ;)

Если вы хотите сделать это, потому что jQuery UI слишком «тяжелый», чем, к вашему сведению, вы можете настроить, какие части вы загружаете / используете.

EDIT

Попробуйте: 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);
    });