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

Тема в разделе "Другие языки", создана пользователем chang, 22 мар 2011.

Модераторы: Цукер
  1. chang

    chang

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

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

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например такой скрипт меняет 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>
    
    

    потестировать онлайн
    http://jsfiddle.net/polyetilen/DZwM4/3/
     
    chang нравится это.