javascript - 可拖动在 jqueryUI 中不起作用

Question

我的 <audio> 有一个简单的进度条元素，我想让旋钮可以拖动，所以我决定尝试 jquery UI .draggable方法，但它不适用于我的旋钮。它所做的只是防止当您将鼠标悬停在播放器上时我的旋钮出现，就好像下面的代码一出现就无效了。

我已经尝试了几个小时，但无法弄清楚我的代码有什么问题。您可以在下面看到播放器:我还包含了一个测试音频文件，因此您可以看到它的运行情况。 (当您将鼠标悬停在播放器上时，旋钮应该会淡入，但在可拖动方法之后不会。某些东西使其无效，如果您希望看到旋钮，只需删除标记为/** 的代码这不起作用/** )

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

<script type="text/javascript " src="http://code.jquery.com/jquery-latest.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="player-small">
                <div class="w-ctrl">
                    <div class="controls">
                        <div class="left">
                            <div class="transport">
                                <div class="play-button-con">
                                    <button class="play" id="playButton">&#9658;</button>
                                </div>
                                <div class="next-button-con">
                                    <button class="next">&#9658;&#9658;&nbsp;&nbsp; </button>
                                </div>
                                <div class="scrubber-con">
                                    <div class="scrubber">
                                        <div class="progress">
                                            <div class="knob"></div>
                                        </div>
                                        <div class="buffered"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <audio id="player" src="http://c1d20c5c.ngrok.io/music/test.mp3" controls="controls" preload="none"></audio>
                        </div>
                    </div>
                </div>
            </div>

所以正如您所看到的，旋钮甚至没有出现，即使您让它出现，它仍然不可拖动。我测试了 lint，一切正常，应该可以正常工作，但事实并非如此。我做错了什么？

Answer 1

您的选择器有误:

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

#.knob 将不起作用，您可以使用 #idname 通过 id 或通过 class< 选择/strong> 使用 .classname。

在你的html中，knob是一个类，所以使用

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

应该有效，但请注意，这会选择具有 knob 类的所有 html 元素。