Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: 6460
Последний выпуск: 19.06.2015

клонирование div-ов

61K
12 июля 2013 года
vahminator
25 / / 30.10.2011
Добрый день!
Помогите разобраться с jQuery
Есть в блока:
1-й содержит ячейки которые можно перемещать.
2-й должен принимать эти блоки

Проблема появляется когда с первого блока поместил несколько ячеек во второй блок и попробовать их поменять местами. Оно выбранную ячейку клонирует и не сортирует. Я только изучаю JS и не могу найти как исправить:(
Посмотреть:
> Код:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://demosites.simplecoding.org/jquery_ui_drag_drop/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://demosites.simplecoding.org/jquery_ui_drag_drop/jquery-ui-1.8.custom.min.js"></script>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
        $('.textBlock').draggable({
            helper:'clone'
        });
        $('#block2').droppable({
            hoverClass: 'dropHere'
            ,drop: function(event, ui) {
                $(this).append($('<div class="textBlock2">' + ui.draggable.html() + '</div>'));
            }
        });
    });
    $(function() {
            $( ".bla1, .bla2" ).sortable({
              connectWith: ".connectedSortable"
            }).disableSelection();
  });
    </script>
    <style>
    @charset "UTF-8";

    body {
        font-family: Arial, sans-serif;
        font-size: 0.8em;
    }

    h1 {
        font-size: 1.2em;
        text-align: center;
    }

    .wrapper {
        width: 400px;
        margin: 20px auto;
    }

    #block1, #block2, #block3 {
        border: solid 1px #555555;
        margin: 10px;
        padding: 20px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .textBlock {
        border: solid 1px #333333;
        font-weight: bold;
        margin: 10px 0 5px 0;
        padding: 10px;
        text-align: center;
        background-color: #eeeeee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    .textBlock2 {
        border: solid 1px #333333;
        font-weight: bold;
        margin: 10px 0 5px 0;
        padding: 10px;
        text-align: center;
        background-color: #eeeeee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .dropHere {
        background-color: #e7e7de;
    }
    .table_drop{
        width: 400px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <table border="1" style="width: 900px" class=" connectedSortables"><tr><td style="width: 100px">
            <div id="block1" class=" bla2 connectedSortables">
                <div class="textBlock ui-state-default">Блок 1</div>
                <div class="textBlock ui-state-default">Блок 2</div>
                <div class="textBlock ui-state-default">Блок 3</div>
                <div class="textBlock ui-state-default">Блок 4</div>
                <div class="textBlock ui-state-default">Блок 5</div>
                <div class="textBlock ui-state-default">Блок 6</div>
            </div>
        </td><td>
               
            <div id="block2" class="bla1">
                <div>
                   
                </div>
            </div>
        </td></tr></table>
    </div>
</body>
</html>

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог