时间戳

首页 > 解决方案 > 如何通过从第一个列表到第二个列表的拖放来制作动态多行列表

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

问题描述

A. 我需要 2 个彼此相邻的列表。左侧包含一个歌名数据库。我希望能够将项目从左侧列表拖放到右侧列表（右侧列表是播放队列）。

B. 我想从 REST GET 服务器调用动态填充左侧列表。

C. 两个列表每个项目都应该有 3 行（艺术家、歌名和专辑）

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

标签： javascripthtmllistdrag-and-drop

解决方案

这是我在 JSFiddle 中所做的一个示例，我从 W3Schools 中稍微更新了这个示例。它使用 html 的拖放功能，并且将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>

推荐阅读