Элемент клонирования jQuery со свойствами стиля

Я хочу сделать перетаскиваемую историю. При остановке перетаскивания он должен подтолкнуть весь DOM к let history = [], а затем всякий раз, когда кто-то нажимает button, последний DOM должен быть возвращен, но это не работает. Когда я пытаюсь вернуть предыдущий DOM, он неправильно клонируется. Похоже, свойство style = "top: , left:" не клонировано. Кто-нибудь может помочь?

let history = [];

function pushHistory() {
  history.push($('.page').each(function() {
    return $(this).clone(true, true)
  }))
}

function backHistory() {
  history.pop();
  $(history[history.length - 1]).each(function() {
    $(this).detach().appendTo($('.outer'))
  })
}
$(".page").draggable({
  stop: function(event, ui) {
    pushHistory();
  }
})

$('button').on('click', function() {
  backHistory();
})

.page {
  display: inline-block;
  background-color: red;
  width: 50px;
  height: 50px;
  position: relative;
  color: white;
  font-size: 3em;
  text-align: center;
  line-height: 50px;
}

.back {
  position: absolute;
  top: 0px;
  right: 0px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class = "outer">
  <div class = "page">
    1
  </div>
  <div class = "page">
    2
  </div>
  <div class = "page">
    3
  </div>
  <div class = "page">
    4
  </div>
  <div class = "page">
    5
  </div>
  <div class = "page">
    6
  </div>
</div>
<button class = "back">
Back
</button>

Вы используете .each(), которые возвращают исходный $('.page'), а не тот, который из обратного вызова вам нужно использовать .map()

— 17.02.2019 12:23

javascript jquery clone

17.02.2019 12:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Я внес небольшую корректировку в часть JavaScript следующим образом, и она работает:

let history = [];

function pushHistory(el) {
    history.push({
        index: el.index(),
        offset: el.offset()
    })
}

function backHistory() {
    let el = history[history.length - 1];
    if (el) {
        $('.outer').find('.page').eq(el.index).offset(el.offset);
        history.pop();
    }
}

$('.page').draggable({
    start: function() {
        pushHistory($(this))
    }
})

$('button').on('click', function() {
    backHistory();
})

По сути, теперь он сохраняет индекс и смещение элемента в перетаскиваемом событии «старт». Затем backHistory действует только на последний перетаскиваемый элемент.

Он работает здесь: https://jsfiddle.net/12sdku0e/

17.02.2019 16:20