аватар |

Статьи / jQuery /

Как поменять блоки и другие элементы местами с помощью jQuery?

Как поменять блоки и другие элементы местами с помощью jQuery? Предлагаю рассмотреть пример кода и просмотреть результат работы, где реализуется подобная задача.

Подключаем библиотеку с Google (чтобы не мучиться скачиванием файла).
Функционал логично подразумевает два действия: элемент передвинуть вверх или вниз. Можно поработать не только с div, если надо, то укажите другой элемент.

Код Java Script (jQuery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
    $(".up").click(function(){
        var pdiv = $(this).parent('div');
        pdiv.insertBefore(pdiv.prev());
        return false
    });
    $(".down").click(function(){
        var pdiv = $(this).parent('div');
        pdiv.insertAfter(pdiv.next());
        return false
    });
  });
  </script>

</head>
<body>

    <div style="padding:100px;">
        <div>Блок 1 <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a> <form><input type="text"></form><div>Текст первого блока</div></div>
        <div>Блок 2 <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a> <form><input type="text"></form><div>Текст второго блока</div></div>
        <div>Блок 3 <a class="up" href="#">Вверх</a> <a class="down" href="#">Вниз</a> <form><input type="text"></form><div>Текст третьего блока</div></div>
    </div>
    
</body>
</html>

Всё просто! Для наглядности в каждый div прописал форму с инпутом и ещё один блок!)
Смотрим пример!
Демонстрация Скачать исходники

Спасибо за внимание!
 



Распечатать
Похожие статьи
17 октября 2013 12:57 Как очистить код вставленный в WISYWIG редактор из MS Word?
19 июня 2014 11:00 Эффект лупы или как зумировать изображение на jQuery
14 апреля 2014 13:45 Как создать адаптивный (резиновый) дизайн сайта на jQuery?
18 июня 2013 14:12 Создаём всплывающее модальное окно jQuery
12 сентября 2014 12:01 Красивое всплывающее окно и кнопки на jQuery, WebUI Popover


Комментарии к статье (vk.com)