Форум

AntonMs · #1 (**permalink**) 06.08.2015, 12:12

Подскажите пожалуйста как при нажатии на соответствующие кнопки перемещать контейнер 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 //не знаю что дальше делать с этим?
})

demoniqus · #2 (**permalink**) 06.08.2015, 14:26

Перемещение может быть:
1) По DOM-дереву - вряд ли ты этого хотел
2) Простое изменение координат (left, top)
Задай перемещаемому и ограничивающему контейнерам правильное позиционирование (absolute и relative) и при клике по кнопкам вызывай изменение координат примерно так div.top += 10 или div.top -= 10
3) Сделай циклическое перемещение или просто запрет на выход за рамки ограничивающего элемента, чтобы они не исчезали из поля зрения

AntonMs · #3 (**permalink**) 06.08.2015, 17:13

demoniqus, а по конкретней, ссылку на то что может помочь, пожалуйста.

Decode · #4 (**permalink**) 06.08.2015, 17:40

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

AntonMs · #5 (**permalink**) 06.08.2015, 17:57

Decode, спасибо.

Rise · #6 (**permalink**) 07.08.2015, 05:31

Decode, в firefox не пашет

Decode · #7 (**permalink**) 07.08.2015, 18:44

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>

Форум

Справочник

Discord чат

Курсы javascript