Как переместить DOM элемент?
Подскажите пожалуйста как при нажатии на соответствующие кнопки перемещать контейнер div ?
<div> <button class='up'>Меня вверх</button> <button class='down'>Меня вниз</button> </div> <div> <button class='up'>Меня вверх</button> <button class='down'>Меня вниз</button> </div> <div> <button class='up'>Меня вверх</button> <button class='down'>Меня вниз</button> </div>
$(document.getElementsByClassName('up')).click(function(){
this.parentNode //не знаю что дальше делать с этим?
})
|
Перемещение может быть:
1) По DOM-дереву - вряд ли ты этого хотел 2) Простое изменение координат (left, top) Задай перемещаемому и ограничивающему контейнерам правильное позиционирование (absolute и relative) и при клике по кнопкам вызывай изменение координат примерно так div.top += 10 или div.top -= 10 3) Сделай циклическое перемещение или просто запрет на выход за рамки ограничивающего элемента, чтобы они не исчезали из поля зрения |
demoniqus, а по конкретней, ссылку на то что может помочь, пожалуйста.
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<style>
body { display: flex; justify-content: center; }
.block { width: 30%; text-align: center; }
.first { background: green; }
.second { background: blue; }
.third { background: red; }
</style>
<body>
<div class="block">
<div class="first">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="second">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="third">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
</div>
<script>
[].forEach.call(document.getElementsByTagName('button'), function(item) {
item.addEventListener('click', function(e) {
var target = e.target, div = target.parentNode, parentDiv = div.parentNode;
if( target.classList.contains('up') ) {
(parentDiv.firstElementChild == div)
? parentDiv.insertAdjacentElement('beforeEnd', div)
: div.previousElementSibling.insertAdjacentElement('beforeBegin', div);
} else if( target.classList.contains('down') ) {
(parentDiv.lastElementChild == div)
? parentDiv.insertAdjacentElement('afterBegin', div)
: div.nextElementSibling.insertAdjacentElement('afterEnd', div);
}
});
});
</script>
</body>
</html>
|
Decode, спасибо.
|
Rise,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<style>
body { display: flex; justify-content: center; }
.block { width: 30%; text-align: center; }
.first { background: green; }
.second { background: blue; }
.third { background: red; }
</style>
<body>
<div class="block">
<div class="first">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="second">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="third">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
</div>
<script src="https://ru.js.cx/article/multi-insert/insertAdjacentFF.js"></script>
<script>
[].forEach.call(document.getElementsByTagName('button'), function(item) {
item.addEventListener('click', function(e) {
var target = e.target, div = target.parentNode, parentDiv = div.parentNode;
if( target.classList.contains('up') ) {
(parentDiv.firstElementChild == div)
? parentDiv.insertAdjacentElement('beforeEnd', div)
: div.previousElementSibling.insertAdjacentElement('beforeBegin', div);
} else if( target.classList.contains('down') ) {
(parentDiv.lastElementChild == div)
? parentDiv.insertAdjacentElement('afterBegin', div)
: div.nextElementSibling.insertAdjacentElement('afterEnd', div);
}
});
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:33. |