在 HTML 中拖放播放列表？答案

【问题标题】：Drag and drop playlist in HTML?在 HTML 中拖放播放列表？
【发布时间】：2020-08-04 18:32:02
【问题描述】：

我正在开发一个拖放项目，可以将音乐剪辑拖放到不同的位置。我已经弄清楚了拖放，但我需要能够将剪辑添加到播放列表中，以便它们根据放置的位置按顺序播放。有没有人对此或网络上的相关示例有任何经验？

【问题讨论】：

标签： javascript html drag-and-drop playlist

【解决方案1】：

我在不使用库的情况下做了一个非常简单的示例。作为基础，我使用了 w3s 示例：https://www.w3schools.com/html/html5_draganddrop.asp 希望对您有所帮助

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #div1 {
            width: 350px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        .list {
            border: 1px solid #ccc;
            cursor: pointer;
            margin: 10px;
            padding: 5px;
        }
    </style>

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }

        function playList() {
            var x = document.getElementsByClassName("list");
            var y = document.getElementById("showList");
            y.innerHTML = "";
            for ( var i = 0; i < x.length; i++) {
                y.innerHTML += x[i].getAttribute("data-path") + "<br>";
            }
        }
    </script>
</head>

<body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag1" class="list" data-path="song1.mp3" draggable="true" ondragstart="drag(event)">Song 1</div>
        <div id="drag2" class="list" data-path="song2.mp3" draggable="true" ondragstart="drag(event)">Song 2</div>
        <div id="drag3" class="list" data-path="song3.mp3" draggable="true" ondragstart="drag(event)">Song 3</div>
        <div id="drag4" class="list" data-path="song4.mp3" draggable="true" ondragstart="drag(event)">Song 4</div>
    </div>

    <button onclick="playList();">PLAY</button>
        
    <div id="showList"></div>

</body>

</html>

【讨论】：

您好，非常感谢您的回答。这绝对是我所追求的。我可以运行您的代码，我看到 playList 函数以删除顺序返回声音文件的名称列表。然后我怎样才能一个接一个地播放这些文件？非常感谢你的帮助。迈克尔

【解决方案2】：

您好，您可以使用 jquery ui，类似这样。

var dragging=false;
$(".list").draggable({ 
    revert: "valid",
    start: function(event, ui) {
        dragging=true;
    },
    stop: function(event, ui) {
        dragging=false;
    }
});
$(".content-list").droppable({
    drop: function(event, ui) {
        $(this).css('background', 'rgb(0,200,0)');
        if($(ui.draggable).hasClass("list")){
          $(this).append("<div class='row'>"+$(ui.draggable).html()+"</div>");
        }
    },
    over: function(event, ui) {
        $(this).css('background', 'orange');
    },
    out: function(event, ui) {
        $(this).css('background', 'cyan');
    }
});
$(".content-list").sortable();

.list{
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float:left;
}
.content-list{
  display: inline-block;
  padding-left:60px;
  border: 2px solid #000;
  width: 500px;
  height: 500px;
}
.row{
  border: 2px solid #000;
  width: 100%;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
<div class="list">6</div>


<div class="content-list"></div>

希望对你有帮助。

【讨论】：

@Hahuen 您好，感谢您的回复。您的答案是否包括播放声音文件？我可以进行拖放，但我无法根据放置位置播放声音文件；换句话说，拖放播放列表。谢谢。
@Michael 按下播放按钮时，您可以迭代容器内的每个项目（div），并将其保存到数组中。然后，您将按所选顺序完成完整的播放列表。此外，您还可以使用 drop 和 sort 事件来刷新数组或将其保存到数据库中。要播放文件，这取决于您使用的插件。
嗨，谢谢，我只是希望在 html 中使用