Перетащить список воспроизведения в HTML? - PullRequest
Новая
       66

Перетащить список воспроизведения в HTML?

0 голосов
/ 04 августа 2020

Я работаю над проектом перетаскивания, в котором клипы musi c можно перетаскивать в разные места. У меня есть перетаскивание, но мне нужно иметь возможность добавлять клипы в список воспроизведения, чтобы они воспроизводились по порядку в зависимости от их удаленных позиций. Есть ли у кого-нибудь опыт работы с этим или соответствующими примерами из Интернета?

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Я сделал очень быстрый пример без использования библиотеки. В качестве основы я использовал пример 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>
0 голосов
/ 04 августа 2020

Привет, вы можете использовать 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>

Надеюсь, это вам поможет.

...