jquery - перемещение двух элементов кликом

chang

Постоялец
Регистрация
20 Ноя 2009
Сообщения
363
Реакции
118
на странице есть несколько дивов расположенных в разных частях страницы

нужно, чтоб при клике на одном диве он выделился
а при клике на другом диве, содержимое этих двух дивов поменялось местами
как такую штуку реализовать? есть ли готовые решения?
 
например такой скрипт меняет html содержимое дивов

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var count = 0;
var replace_id = Array();
$(document).ready(function(){
    $("div.block").click(function(){
        replace_id[count]=$(this);
        //при клике добавляет класс block_click, если не надо то удалить
        $(this).addClass("block_click");
        //набрали два объекта
        if(count==1){
            //убираем класс block_click из объектов, если не надо то удалить
            replace_id[0].removeClass("block_click");
            replace_id[1].removeClass("block_click");
            //меняем html объектов
            temp = replace_id[0].html();
            replace_id[0].html(replace_id[1].html());
            replace_id[1].html(temp);
            count = 0;
        }else{
            count=1;
        }
    });
});
</script>

<style type="text/css">
<!--
.block{
    height:100px;
    width:100px;
    border:1px solid #000;
}
.block_click{
    border:2px solid #F00;
}
-->
</style>
</head>

<body>

<div id="div1" class="block">111</div>
<div id="div2" class="block">222</div>
<div id="div3" class="block">333</div>

</body>
</html>

 
Назад
Сверху