拖放生成器如何保存当前选定的小部件/组件状态？答案

【问题标题】：How Drag & Drop Builder save current selected widget/component state?拖放生成器如何保存当前选定的小部件/组件状态？
【发布时间】：2018-10-19 16:01:18
【问题描述】：

我知道这可能是一个菜鸟问题。例如，假设一个电子邮件模板构建器。当您将图像小部件拖放到构建器区域时，然后单击图像，然后会显示一些设置以自定义所选图像。

我的问题是，所选图像的 ID/参考存储在哪里，以便所做的任何设置都适用于该图像？

【问题讨论】：

stackoverflow.com/help/mcve 请发布您尝试过的内容。就目前而言，这可能范围过于广泛。
我已尝试将状态或 ID 保存到窗口对象。但我觉得这不是正确的方法。很想看看其他人在做什么。
google.com/…
@MarkSchultheiss 我不是故意粗鲁，但显然你不明白我的问题。我知道如何做一个拖放的东西。如果您不理解我的问题，请要求澄清。
也不要给人粗鲁的印象，我只是指出您的问题不符合我参考帮助您的网站指南。这是一个编码站点，并且在问题中需要代码。为了使它成为一个更好的问题，您应该（已经）发布您尝试使用和修复的实际代码。老实说，我将发布一个答案（因为创建一个简单的示例非常容易），但由于缺乏一组可行的代码，我也会投票结束这个问题。

标签： javascript events drag-and-drop

【解决方案1】：

因为它非常容易做，所以我做了一个超级快速的模型，并直接从这里复制了一个最小的可行示例：https://developer.mozilla.org/en-US/docs/Web/Events/drop

然后我将其修改为 img 而不是 div 并放入控制台日志以显示 img 属性，包括 id 和它具有的任何其他内容。

var dragged;

/* events fired on the draggable target */
document.addEventListener("drag", function(event) {

}, false);

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = .5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

}, false);

document.addEventListener("drop", function(event) {
console.log(dragged);
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }

}, false);

#draggable {
  width: 200px;
  height: 20px;
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin-bottom: 10px;
  padding: 10px;
}

<div class="dropzone">
  <img id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" alt="draggableimg" />

</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

【讨论】：