Как отменить метод DOM append () - PullRequest
Новая
       1

Как отменить метод DOM append ()

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

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}
<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

Я хочу иметь возможность щелкнуть по элементу, он переходит к элементу контейнера, а затем я снова щелкаю по элементу, он возвращается к исходномуместо.Могу ли я отменить этот процесс?Есть ли лучший способ удовлетворить ту же цель?

Ответы [ 6 ]

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

Вы можете сделать это: 

function select(){
  document.getElementById('container').style.border="2px solid red";
}

// boolean to keep track of the position
var inside = false;
function pick(){
  if(!inside) {
    document.getElementById('container').appendChild(document.getElementById('item'));
    var getMeHere = document.getElementById('getMeBackHere');
    
  } 
  else {
     var pickMe = document.getElementById('container');
     document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
    
  }
  inside = !inside;
}
#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}
<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id = "getMeBackHere"></div>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>
0 голосов
/ 10 октября 2018

Я думаю, что это единственный способ сделать это.

var savedElement;

function select(){
  document.getElementById('container').style.border="2px solid red";
  
  document.getElementById('container').removeChild(savedElement);
  
  document.getElementById('container').after(savedElement);
}
function pick() {
  savedElement = document.getElementById('item');
  document.getElementById('container').appendChild(savedElement);
}
#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}
<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>
0 голосов
/ 10 октября 2018 

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
if(document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
  document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}
<html>
  <body id="example">
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>
0 голосов
/ 10 октября 2018

Другое решение :

сохранить копию для document.getElementById('container').parentNode.innerHTML, даже если вы можете сохранить ее в одном массиве, тогда она может поддерживать отмену один за другим.

затем при сбросе присваивает его обратно (если сохранить несколько копий в одном массиве, назначить с последней копией, а затем выдвинуть его).

Как показано ниже: demo: 

let cloned = []

cloned.push(document.getElementById('container').parentNode.innerHTML)

function select(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').appendChild(document.getElementById('item'))
}

function reset(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
  cloned = [cloned[0]]
}

function undo(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
  cloned.pop()
}
#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}
<html>
  <body>
    <button onclick="reset()">Reset</button>
    <button onclick="undo()">Undo</button>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>
0 голосов
/ 10 октября 2018

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

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

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

Вы можете изменить функцию 'pick', чтобы проверить, находится ли item в контейнере, и, если он есть, добавить его обратно к body, например: 

function pick(){

  var item = doucumentgetElementById('item');
  var container = document.getElementById('container');
  if (item.parentElement == container)
  {
     document.body.appendChild(item);
  }
  else
  {
     container.appendChild(item);
  }
}

Вкл. первый щелчок item перемещается на container, на second click возвращается на body.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...