如何通过从第一个列表拖放到第二个列表来制作动态多行列表

Question

一个。我需要 2 个彼此相邻的列表。左边的包含一个歌曲标题数据库。我想成为能够将项目从左侧列表拖放到右侧列表（右侧列表是一个游戏queue）。

乙。我想通过 REST GET 服务器调用动态填充左侧列表。

C。两个列表中的每一项（艺术家、歌曲名称和专辑）都应该有 3 行

这一切可能吗？我应该走什么路？我正在寻找一种至少依赖第三方的方式（不是我们所有人）。

Answer 1

这是我在 JSFiddle 中做的一个例子，我从 W3Schools 的这个例子中更新了一点。它使用 htmls 拖放功能，将它们放在一起相当简单 https://www.w3schools.com/html/html5_draganddrop.asp.

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

function drag(ev) {
console.log(ev.target.id);
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 addData() {
// Mock return data from API call
  var data = [{title: "song 1", album: "album 1", artist: "artist 1"}, {title: "song 2", album: "album 2", artist: "artist 2"}]
  
  for (let i = 0; i < data.length; i++) {
  
    var columnTracks = document.getElementById("tracks");
    var node = document.createElement("div");
    var songTitle = document.createTextNode(data[i].title);
    var songAlbum = document.createTextNode(data[i].album);
    var songArtist = document.createTextNode(data[i].artist);
    
    node.setAttribute("ondragstart", "drag(event)");
    node.setAttribute("ondrop", "drop(ev)");
    node.setAttribute("draggable", "true");
    node.setAttribute("id", `${data[i].title}-${data[i].artist}`)
    node.class="item";
    node.appendChild(songTitle);
    node.appendChild(songAlbum);
    node.appendChild(songArtist);
    columnTracks.appendChild(node);
}}
</script>


<body>
  <div class="rows">
    <div ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 50%;    float:right; height: 300px; background-color: grey;">
      <B>QUEUE</B>
    </div>
    <div id="tracks"  style="background-color: darkgray; height: 300px;">
    <B>TRACKS</B>
      <div id="item-1" class="item" ondragstart="drag(event)" draggable="true">
        Item 1
      </div>
      <div id="item-2" class="item" ondragstart="drag(event)" draggable="true">
        Item 2
      </div>
    </div>
  </div>
  
  
  <div>
  <button onclick="addData()" style="height: 20px; width: 150px;">
  ADD DATA
  </button>
  </div>
</body>

如何通过从第一个列表拖放到第二个列表来制作动态多行列表

How to make dynamic multiline list with drag & drop from first to second list

html

javascript

drag-and-drop

list