Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2013, 21:31
Bay Bay вне форума
Новичок на форуме
Отправить личное сообщение для Bay Посмотреть профиль Найти все сообщения от Bay
 
Регистрация: 10.02.2013
Сообщений: 3

Поменять местами два <div>
Доброго времени суток!

Ребята, подскажите новичку, пожалуйста.
Задание: Есть 3 дива. Кликаем на любой из них, скажем первый. Затем, кликаем на любой другой, скажем 2ой или 3ий. После клика на второй див, они должны поменяться местами с первым кликнутым.
Я написал только код самих дивов и сделал их выделяемыми, а вот именно с переменой местами - даже нет идей.
Прошу помощи!

Вот код:

Код:
<html>
<head>

<style>

#Div1{

position: absolute; /* Абсолютное позиционирование */
top: 50px;
height: 50px; /* Высота блока */
width: 100px; /* Ширина блока */
padding: 7px; /* Поля вокруг текста */
outline-color: red;
}
#Div2{
position: absolute; /* Абсолютное позиционирование */
left: 160px; /* Положение элемента от левого края */
top: 50px;
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
padding: 7px; /* Поля вокруг текста */
outline-color: red;
}

#Div3{

position: absolute; /* Абсолютное позиционирование */
left: 380px; /* Положение элемента от левого края */
top: 50px;
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
outline-color: red;
padding: 7px; /* Поля вокруг текста */
}
</style>

 
</head>
<body>
<div tabindex="1" id="Div1">Div1</div>
<div tabindex="2" id="Div2">Div2</div>
<div tabindex="3" id="Div3">Div3</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2013, 22:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

jQuery пойдёт ?
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2013, 22:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,362

Bay,
Вариант ...
<!DOCTYPE HTML>

<html>
<head>

<style>

#Div1{

position: absolute; /* Абсолютное позиционирование */
top: 50px;
height: 50px; /* Высота блока */
width: 100px; /* Ширина блока */
padding: 7px; /* Поля вокруг текста */
outline-color: red;
}
#Div2{
position: absolute; /* Абсолютное позиционирование */
left: 160px; /* Положение элемента от левого края */
top: 50px;
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
padding: 7px; /* Поля вокруг текста */
outline-color: red;
}

#Div3{

position: absolute; /* Абсолютное позиционирование */
left: 380px; /* Положение элемента от левого края */
top: 50px;
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
outline-color: red;
padding: 7px; /* Поля вокруг текста */
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
<div tabindex="1" id="Div1">Div1</div>
<div tabindex="2" id="Div2">Div2</div>
<div tabindex="3" id="Div3">Div3</div>
<script language="JavaScript" type="text/javascript">
  var css , div;
 $('div').click(function (e) {
 if (css) {div.css($(this).css(["left", "top"]));$(this).css(css); css = null}
 else {css = $(this).css(["left", "top"]); div = $(this)}
        });
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2013, 22:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

мон через replaceWith
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2013, 01:22
Bay Bay вне форума
Новичок на форуме
Отправить личное сообщение для Bay Посмотреть профиль Найти все сообщения от Bay
 
Регистрация: 10.02.2013
Сообщений: 3

Спасибо большое ребят) Я так понимаю, то что Рони написал это JQuery?
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2013, 03:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,362

Сообщение от Deff
через replaceWith
а мона ваш вариант с replaceWith?
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2013, 04:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

лучше стили, отвечающие за расположение, вынести в классы, например .place1, .place2 .. и просто менять у div'ов эти классы.
Или, сделать ячейки для div'ов, и через element.insertBefore() по-настоящему перемещать элементы. Причем оба варианта легко решаются без всяких jQuery.
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2013, 04:34
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А обязательно использовать абсолютное позиционирование? Чем дефолтный flow не угодил?
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2013, 05:22
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE HTML>
<html>
<head>
<style>
div[id^="Div"]{
  height: 50px; /* Высота блока */
  width: 100px; /* Ширина блока */
  padding: 7px; /* Поля вокруг текста */
  border:solid 1px;
  margin:7px;
}
div.change {
  border:dotted 1px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="Wrp">
<div tabindex="1" id="Div1"  style="border-color:red">Div1</div>
<div tabindex="2" id="Div2" style="border-color:blue">Div2</div>
<div tabindex="3" id="Div3" style="border-color:green">Div3</div>
</div>


<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.Wrp').on('click','div[id^="Div"]',function () {
  var a = $('.Wrp').find('.change');
  if( a.get(0)===$(this).get(0)){a.removeClass('change');return false;}
  $(this).addClass('change');
  if(a.length>=1) {
    var b = $(this).clone();
    var c = a.clone();
    a.replaceWith(b);
    $(this).replaceWith(c);
    $('div[id^="Div"]').removeClass('change');
  }
});
});
</script>
  </body>
</html>

Последний раз редактировалось Deff, 12.02.2013 в 11:27.
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2013, 05:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Bay, а зачем там tabindex? Во-первых навигация получается запутанной, когда дивы перетасованы, во-вторых, нужно тогда и обработчик onkeydown устанавливать, чтоб обрабататывать нажатие клавиш.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поменять местами элементы? dezzignet jQuery 2 19.07.2012 13:36
Jquery - поменять местами блоки denlem jQuery 4 09.12.2010 16:00
Поменять event`ы местами UnderShot Events/DOM/Window 8 08.10.2010 21:21
Поменять слова местами iceman Общие вопросы Javascript 1 23.06.2009 16:14
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 18:53