Поменять местами два <div>
Доброго времени суток!
Ребята, подскажите новичку, пожалуйста. Задание: Есть 3 дива. Кликаем на любой из них, скажем первый. Затем, кликаем на любой другой, скажем 2ой или 3ий. После клика на второй див, они должны поменяться местами с первым кликнутым. Я написал только код самих дивов и сделал их выделяемыми, а вот именно с переменой местами - даже нет идей. Прошу помощи! :) Вот код: Код:
<html> |
:) jQuery пойдёт ?
|
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>
|
мон через replaceWith
|
Спасибо большое ребят) Я так понимаю, то что Рони написал это JQuery?
|
Цитата:
|
лучше стили, отвечающие за расположение, вынести в классы, например .place1, .place2 .. и просто менять у div'ов эти классы.
Или, сделать ячейки для div'ов, и через element.insertBefore() по-настоящему перемещать элементы. Причем оба варианта легко решаются без всяких jQuery. |
А обязательно использовать абсолютное позиционирование? Чем дефолтный flow не угодил?
|
<!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>
|
Bay, а зачем там tabindex? Во-первых навигация получается запутанной, когда дивы перетасованы, во-вторых, нужно тогда и обработчик onkeydown устанавливать, чтоб обрабататывать нажатие клавиш.
|
| Часовой пояс GMT +3, время: 13:18. |