Как Drag & Drop Builder сохраняет текущее состояние выбранного виджета / компонента? - PullRequest
Новая
       30

Как Drag & Drop Builder сохраняет текущее состояние выбранного виджета / компонента?

0 голосов
/ 19 октября 2018

Я знаю, что это может быть нубский вопрос.Допустим, например, создатель шаблона электронной почты.Когда вы перетаскиваете, скажем, виджет изображения в область конструктора, а затем нажимаете на изображение, которое затем открывает некоторые настройки для настройки выбранного изображения.

Мой вопрос: где находится идентификатор / ссылка выбранного изображения?хранится так, что к этому изображению применяются какие-либо настройки?

1 Ответ

0 голосов
/ 19 октября 2018

Поскольку это было очень легко сделать, я сделал супер быстрый макет с минимальным жизнеспособным примером, скопированным прямо отсюда: https://developer.mozilla.org/en-US/docs/Web/Events/drop

Затем я изменил его так, чтобы он был img, а не * 1005.* и поместите в консольный журнал, чтобы показать img свойства, включая идентификатор и все остальное, что у него есть. 

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