Форум

Bay · #1 (**permalink**) 10.02.2013, 22:31

Доброго времени суток!

Ребята, подскажите новичку, пожалуйста.
Задание: Есть 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>

Deff · #2 (**permalink**) 10.02.2013, 23:02

jQuery пойдёт ?

рони · #3 (**permalink**) 10.02.2013, 23:18

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>

Deff · #4 (**permalink**) 10.02.2013, 23:42

мон через replaceWith

Bay · #5 (**permalink**) 11.02.2013, 02:22

Спасибо большое ребят) Я так понимаю, то что Рони написал это JQuery?

рони · #6 (**permalink**) 11.02.2013, 04:08

Сообщение от Deff

через replaceWith

а мона ваш вариант с replaceWith?

danik.js · #7 (**permalink**) 11.02.2013, 05:33

лучше стили, отвечающие за расположение, вынести в классы, например .place1, .place2 .. и просто менять у div'ов эти классы.
Или, сделать ячейки для div'ов, и через element.insertBefore() по-настоящему перемещать элементы. Причем оба варианта легко решаются без всяких jQuery.

danik.js · #8 (**permalink**) 11.02.2013, 05:34

А обязательно использовать абсолютное позиционирование? Чем дефолтный flow не угодил?

Deff · #9 (**permalink**) 11.02.2013, 06:22

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

danik.js · #10 (**permalink**) 11.02.2013, 06:44

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

Форум

Справочник

Discord чат

Курсы javascript