Draggable not working in jqueryUI

Question

I have a simple progress bar for my element and I want to make it so the knob is draggable, so I decided to try the jquery UI .draggable method, but it does not work on my knob. All it does is prevent my knob from appearing when you hover over the player as if the code beneath is invalid as soon as that code is in there.

I've tried this for hours and cannot figure out what's wrong with my code. You can see the player below here: I've included a test audio file also so you can see it in action. (The knob is supposed to fade in when you hover over the player, but doesn't after the draggable method. Something is making it invalid, if you wish to see the knob, simply remove the code marked /** This does not work /** )

/** 
    VARIABLES
**/

/** Elements **/

var player = $("#player");
var playerE = $("#player")[0];
var playerE = $("#player").get(0);
var playbutton = $("#playButton");
var scrubber = $(".scrubber");
var progress = $(".progress");
var buffered = $(".buffered");
var knob = $(".knob");

/** Variables **/

var isPlaying = 0;
var buffered = 0;
var progress = 0;

/** 
    CONTROLS
**/

/** Scrubber and Time **/

playerE.ontimeupdate = function () {
    audioTimeUpdater();
};

function audioTimeUpdater() {
    var progress = playerE.currentTime / playerE.duration;
    var buffered = playerE.buffered.end(0) / playerE.duration;
    $(".progress").width((progress * 100) + "%");
    $(".buffered").width((buffered * 100) + "%");
}

/** This does not work **/

$("#.knob").draggable({
    axis: "x"
});

/** This also stops working after the above code, if I remove it, it works. **/

$(".player-small").mouseenter(function () {
    $(".knob").stop().fadeIn(200);
});
setTimeout(function () {
    $(".player-small").mouseleave(function () {
        $(".knob").stop().fadeOut(200);
    });
}, 3000);

/** 
    EVENT HANDLERS
**/

/** 
    FUNCTIONS
**/


function play(file, title) {
    playbutton.removeClass("playFailed");
    var filename = "/music/" + file;
    player.attr("src", filename).trigger("play");
    playerHasError();
    if (playerIsToggled === 0) {
        playerToggle();
    }
}

function playerHasError() {
    $("#player").on("error", function (e) {
        source = $("#player").attr('src');
        pushModal("We can't play that!", "Audio element error.", ("An error occured and " + source + " cannot be played. If this is an error that persists please contact the website administrator."), "Audio element returned error trying to play source.", 1);
        playbutton.addClass("playFailed");
    });
}

button {
    border: none;
    outline: none;
}

body,
nav,
ul,
li,
a {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

body {
    overflow-y: scroll;
}

::selection {
    background: rgba(255, 64, 129, 0.85);
    color: black;
    /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: rgba(255, 64, 129, 0.85);
    color: black;
}
.player-small {
    height: 55px;
    width: 100%;
    background: #ff4081;
}

.player-height-anim {}

.player-small .left {
    height: 55px;
    float: left;
    width: 60%;
}

.player-small .right {
    height: 55px;
    float: right;
    width: 40%;
}

.transport {
    overflow: auto;
}

.play-button-con {
    height: 55px;
    width: 55px;
    float: left;
}

.play {
    padding-top: 3px;
    width: 55px;
    height: 55px;
    font-size: 18px;
    padding-right: 4px;
    text-align: center;
}

.playFailed {
    color: rgba(255, 255, 255, 0.17)!important;
    pointer-events: none;
}

.next-button-con {
    height: 55px;
    width: 55px;
    float: left;
}

.next {
    padding-top: 2px;
    padding-right: 8px;
    width: 55px;
    height: 55px;
    text-align: center;
    letter-spacing: -3px;
    font-size: 11px;
    padding-bottom: 2px
}

.scrubber-con {
    float: left;
    height: 55px;
    width: calc(100% - 111px);
}

.scrubber {
    width: calc(100% - 40px);
    margin: auto;
    margin-top: 25px;
    height: 5px;
    background: rgba(0, 0, 0, .04);
    cursor: pointer;
}

.scrubber .knob {
    float: right;
    height: 13px;
    width: 13px;
    position: relative;
    bottom: 4px;
    left: 5px;
    background: white;
    border-radius: 50px;
    display: none;
}

.scrubber .knob:hover {
    cursor: grab;
}

.scrubber .knob:active {
    cursor: grabbing;
}

.scrubber .progress {
    height: 100%;
    float: left;
    background: white;
    width: 0%;
    position: relative;
    z-index: 1;
    transition: ease 300ms;
}

.scrubber .buffered {
    height: 5px;
    position: relative;
    width: 0%;
    background: rgba(0, 0, 0, .09);
    transition: ease 1000ms;
}

.player-small button {
    color: white;
    float: left;
    background: rgba(0, 0, 0, .04);
    cursor: pointer;
}

.player-small button:hover {
    background: rgba(0, 0, 0, .12);
}

So as you see the knob doesn't even appear, and if you make it appear, it is still not draggable. I tested the lint and everything is OK and should be working, but it isn't. What am I doing wrong?

Vale · Accepted Answer

Your selector is wrong:

$("#.knob").draggable({...});

#.knob won't work, you can either select via an id using #idname or via a class using .classname.

In your html, knob is a class, so using

$(".knob").draggable({
    axis: "x"
});

Should work, but be aware that this selects all html elements with the knob class.

Draggable not working in jqueryUI

Answers (1)

Related Questions