#javascript #html #arrays #drag-and-drop
Вопрос:
Я хочу получить данные из каждого перетаскиваемого элемента после его удаления и добавить их в массив. Я относительно новичок в Javascript, поэтому не уверен, как я могу этого достичь. Я хочу, чтобы «данные» добавлялись в массив «всего» каждый раз, когда элемент отбрасывается, вот что у меня есть до сих пор:
function dropHandler(ev) { ev.preventDefault(); const totalBalance = []; var data = ev.dataTransfer.getData("text"); var dropTarget = document.getElementById('drop-target'); ev.target.appendChild(document.getElementById(data)); // changes colour of drop target when dragged over ev.currentTarget.style.background = "black"; totalText = document.getElementById('totalText'); totalText.innerHTML = totalBalance } Комментарии:
1.
totalBalance.push(data);добавить его в список, если вы это имеете в виду?2. Да, но я предполагаю, что мне нужно будет использовать цикл, иначе массив будет заменен последним удаленным элементом. Хотя не совсем уверен, как это сделать. Спасибо.
3. Вы можете переместить определение
totalBalanceсписка передdropHandler()функцией, чтобы оно не переопределялось каждый раз, когда что — то отбрасывается-если вы не уверены в том, как это сделать, дайте мне знать, и я могу опубликовать ответ ниже с примером кода.4. Это было то, чего я добивался, большое спасибо.
5. Рад, что вы решили эту проблему! Я опубликовал ответ ниже для всех, кто может наткнуться на это в будущем.
Ответ №1:
С помощью созданного вами списка вы можете просто вставить в него новые значения, при push(value) этом заданное значение будет вставлено в список.
let totalBalance = []; // Table to track all of the balances. function dropHandler(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var dropTarget = document.getElementById('drop-target'); ev.target.appendChild(document.getElementById(data)); // changes colour of drop target when dragged over ev.currentTarget.style.background = "black"; // Insert this data into our total balance's list. totalBalance.push(data); totalText = document.getElementById('totalText'); totalText.innerHTML = totalBalance } totalBalance Список определяется до определения функции, поэтому он не перезаписывается каждый раз, когда что-то удаляется.