Элемент jQuery clone clone со свойствами стиля - PullRequest
Новая
       10

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

0 голосов
/ 17 февраля 2019

Я хочу сделать перетаскиваемую историю.Когда перетаскиваемый останов останавливается, он должен выдвинуть весь 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>

1 Ответ

0 голосов
/ 17 февраля 2019

Я немного подкорректировал часть 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();
})

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

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

...