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>

因此，当你看到旋钮甚至没有出现时，如果你出现它，它仍然是不可拖动的。我测试了棉绒，一切都很好，应该可以工作，但它不是。我做错了什么？

Answer 1

你的选择器错了：

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

#.knob无法使用，您可以使用#idname通过 ID 进行选择，也可以使用.classname通过类进行选择

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

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

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

可拖动无法在jqueryUI中工作

1 个答案: