javascript - 拖放后如何保存新的html位置？

问题描述

我正在做一个项目，我有只能放置在 7 个特定放置区域内的可拖动卡片。

我可以拖动卡片并将它们放置到新区域，但是一旦我重新加载页面，位置就不会保存。

在 "drop" 事件中，我尝试使用 "outerHTML" 将在我 "drop" 卡片后动态创建的整个新 div（丢弃的卡片新位置和 8 个放置区域）保存到本地存储中localstorage.setItem('newCardDashboardDiv', cardDashboard.outerHTML)，并且数据似乎以字符串的形式正确保存在本地存储中（即它保存了整个 div，包括在将卡片拖动并放置在任何放置区域 1 到 7 之后将包含卡片的 html 元素的更新的内部 div）。

我尝试从本地存储数据中拉出整个 div 并将其设置为新的 html 值const newDashboardDiv = localstorage.getItem('newCardDashboardDiv) $("#cardDashboardDiv).replaceWith(newDashboardDiv)，但它不起作用。我觉得我已经尝试了一切。

一旦我从本地存储中提取了该 outerHTML 数据，使用 outerHTML 似乎会删除原始 HTML 的所有样式和功能元素。新卡的放置实际上在刷新时会保存，但它是灰色的，我不能再将卡拖到任何新的放置区域。

顺便说一句，我正在使用 Chrome。

这是我的代码

HTML

<section id="cardFrameworkDashboard">
<div id="cardDashboardRow" class="container-fluid cardDashboardRow">
  <div id="replaceDash" class="row mt-5">
    <div class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
      <div class="card-body cardContent" draggable="false">
        <h5 class="card-title">System Messages Card</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
    <div id="placementArea1" class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
      <div id="droppable1" class="card-body cardContent" draggable="true">
        <h5 class="card-title">Content Card 1</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
    <div id="placementArea2" class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
    </div>
    <div id="placementArea3" class="cardPlacementArea" style="width: 30rem; height: 20rem;">
    </div>
  </div>
  <div class="row mt-5">
    <div id="placementArea4" class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
    </div>
    <div id="placementArea5" class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
    </div>
    <div id="placementArea6" class="cardPlacementArea" style="width: 30rem; height: 20rem; margin-right: 5rem;">
    </div>
    <div id="placementArea7" class="cardPlacementArea" style="width: 30rem; height: 20rem;">
    </div>
  </div>
</div>

Javascript

const cardContentDraggables = document.querySelectorAll('.cardContent')
const cardPlacements = document.querySelectorAll('.cardPlacementArea')
const cardDashboard = document.querySelector('.cardDashboardRow')

cardContentDraggables.forEach(cardContentDraggable => {
    cardContentDraggable.addEventListener("dragstart", () => {
        cardContentDraggable.classList.add("dragging")
    })

    cardContentDraggable.addEventListener("dragend", () => {
        cardContentDraggable.classList.remove("dragging")
    })

    cardPlacements.forEach(cardPlacement => {
        cardPlacement.addEventListener("dragover", event => {
            event.preventDefault()
            const draggable = document.querySelector(".dragging")
            cardPlacement.append(draggable)
        })
        cardPlacement.addEventListener("dragstart", dragStart)
        cardPlacement.addEventListener("dragend", dragEnd)
        cardContentDraggable.addEventListener('drop', () => {
            localStorage.setItem('newCardDashboardDiv', cardDashboard.outerHTML)
            console.log('position saved to ls')
        })
    })
})

function dragStart() {
    for (var i = 0; i < cardPlacements.length; i++) {
        cardPlacements[i].classList.add("cardPlacementAreaDrag")
    }
}

function dragEnd() {
    for (var i = 0; i < cardPlacements.length; i++) {
        cardPlacements[i].classList.remove("cardPlacementAreaDrag")
    }
}

jQuery

  $(document).ready(function () {
    const newDashboardDiv = localStorage.getItem('newCardDashboardDiv')
    console.log('success got div from ls')
    $(window).bind("beforeunload", function (event) {
      event.preventDefault()
      console.log('detected refresh')
    })
    $(window).on('load', function (event) {
      event.preventDefault()
      console.log('after refresh')
      $("#cardDashboardRow").replaceWith(newDashboardDiv)
    })
})

标签： javascripthtmljquerylocal-storagedomparser

javascript - 拖放后如何保存新的html位置？

问题描述

解决方案

推荐阅读