保存（并传递）具有特定 id 的元素的位置（可能到数组）

Question

我正在寻找一种方法来保存在具有特定 ID 的 div 中找到的元素。

理想情况下，我只想保存它们的 ID 以及它们在 div 中出现的顺序。它们是使用 dragula 库复制过来的。

我的 JS 让我一事无成：

dragula([document.querySelector('.container1'), document.querySelector('.container2')], {

  copy: function (el, source) {
    return source === document.querySelector('.container1')
  },
  accepts: function (el, target) {
    return target !== document.querySelector('.container1')
  },
   removeOnSpill: true
  });

var findId = $('.container2').find(id^=n);

$('.showMeId').append(findId);

Codepen 上完整的工作示例： https://codepen.io/anon/pen/NyBwOy

Answer 1

首先，您需要触发一个事件来运行 id 检查。其次，在复制 HTML 元素时，ids 可能是一件很难处理的事情，因为它们在每个页面上应该是唯一的。您是否考虑过独特的 class 名称？

出于某种原因，jquery 选择器无法与您正在使用的库一起使用。可能是 codepen 的问题，也可能是 draggable 的问题。

使用vanilla js，有两种方式来完成选择和显示。此代码应该可以帮助您走上获取所需 DOM 数据的正确途径：

对于特定元素 ID：

<button id="demo" onclick="seeId()">Click</button>

function seeId(){
  var idbox = document.getElementById('n3');
  document.querySelector('.showMeId').innerHTML = idbox.textContent;
}

要进一步操作所有元素，您可以使用 javascript 方法 .children / .firstChild 等

function seeId(){
  var idboxes = document.querySelector('.container2').children;
  document.querySelector('.showMeId').appendChild(idboxes[0]);
  for(var i of idboxes){
    console.log('or do something with each node ', i);
  }
}

保存（并传递）具有特定 id 的元素的位置（可能到数组）

Save (and pass) position (possibly to array) of elements with specific id

jquery

find

dragula