Javascript 如何使用拖放创建动态多行列表；从第一个列表下降到第二个列表_Javascript_Html_List_Drag And Drop

Javascript 如何使用拖放创建动态多行列表；从第一个列表下降到第二个列表

javascript html list

Javascript 如何使用拖放创建动态多行列表；从第一个列表下降到第二个列表,javascript,html,list,drag-and-drop,Javascript,Html,List,Drag And Drop,我需要两张紧挨着的清单。左边一个包含歌曲名称数据库。我想成为能够将项目从左侧列表拖放到右侧列表（右侧列表是播放队列） B.我想通过REST GET服务器调用动态填充左侧列表 C.两个列表中每个项目都应该有3行（艺术家、歌曲标题和专辑）这一切可能吗？我该怎么走？我正在寻找一种最不依赖第三方的方法（我们不是都这样吗）。这里是我在JSFIDLE中做的一个例子，我从W3S学校对这个例子进行了一点更新。它使用了htmls拖放功能，而且组装起来相当简单功能allowDrop（ev）{ ev.prev

我需要两张紧挨着的清单。左边一个包含歌曲名称数据库。我想成为能够将项目从左侧列表拖放到右侧列表（右侧列表是播放队列）

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

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

这一切可能吗？我该怎么走？我正在寻找一种最不依赖第三方的方法（我们不是都这样吗）。

这里是我在JSFIDLE中做的一个例子，我从W3S学校对这个例子进行了一点更新。它使用了htmls拖放功能，而且组装起来相当简单


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
控制台日志（ev.target.id）；
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））
}
函数addData（）{
//来自API调用的模拟返回数据
var data=[{标题：“歌曲1”，专辑：“专辑1”，艺术家：“艺术家1”}，{标题：“歌曲2”，专辑：“专辑2”，艺术家：“艺术家2”}]
for（设i=0；i

两件事：不能删除添加了addData的项目。如何使儿童的songartist、songtitle和songalbum垂直对齐？在创建var songtitle、songalbum、songartist时，可以使用CreateText节点，而不是createElement（“div”）然后将textNode添加到您创建的div中，使其垂直对齐。您是否碰巧知道为什么不能删除这些项？是的，我们已经将属性设置错误，应该使用node.setAttribute方法，如本文所示。我已经更新了addData函数中的代码，以反映拖放对于添加了addData的项仍然不起作用

<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>