VPF::jQuery Sortable: исчезание айтема (3 вложенности)

EugenyPavlenko

Дата 21.10.2009, 21:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 60
Регистрация: 13.7.2006

Репутация: нет
Всего: нет

Добрый день,

Мне нужно сделать сортинг тройной вложенности, то есть:
1. Есть "страницы" (class="sortPages")
2. "Модуля" находятся внутри страниц (class="sortModules")
3. Но внутри модулей могут быть под-модули - те же самые модули перетащенные внутрь другого модуля (class="sortModuleSub")

а) Страницы могут быть перетащены между собой вместе со всем содержимым.
б) Модули могут быть перетащены между собой а так же к модулям в другие страницы
с) Модули могут быть втянуты внутрь других модулей (sub...), и соотвтенно могут быть вытащены оттуда.

Всё это более менее получается, НО когда добавляю третий уровень (то что описано под 3.), то начинаются определенные проблемы, а именно: во время перетаскивании модулей образуется ситуация когда модуль перетаскивается как бы никуда... То есть обычно когда перетаскиваешь то placeholder появляется на том месте куда модуль перетащен будет, НО в ошибочной ситуации он появляется вместе с helper (то что показывается под мышкой во время перетаскивания)... и самое плохое в том что если прекратить перетаскивание в этот момент ТО перетаскиваемый элемент испарится а ФайрФокс выдаст ошибку:
Node cannot be inserted at the specified point in the hierarchy" code: "3

Вот скрин когда возникает ошибочная ситуация:
Картинка

Вызвать эту ошибку не сложно, но сложно описать.... В общем надо схватить модуль и перемещать его вверх/вниз и потом плавно отводить вправо вниз... вы заметите что плейсхолдер (прямоугольник) вдруг перепрыгнет к курсору.. в этот момент если его отпустить то весь модуль безвозвратно исчезнет и будет ошибка...

Правильная ситуация была бы если бы после отпускания модуль бы возвращался на исходную позицию....

Не пойму то ли я разметку неправильно сделал то ли Сортебле неправильно применяю... можете что-то порекомендовать?

Вот код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>test site</title>
    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>

    <style>
        
        .float1 {
            width: 48%;
            background-color: #CDFECD;
            padding: 3px;
        }
    
        .blank {
            /*background-color: #2B65EC;*/
            border: 1px solid black;
            width: 100px;
            height: 20px;
        }
        
        .sortPages {
            padding-bottom: 30px;;
        }
        
        .sortModule {
            border: 1px solid green;
            width: 100px;
            margin: 2px;
        }
    </style>
    
</head>

<body>
    
    <div id="sortable" align="center" style="padding: 50px"> 
    
        <div class="sortPages">
            <div class="pageCaption">Page 1</div>
            <div class="sortModules">
                <div class="sortModule">
                    <div class="sortModuleName">module 1.1</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 1.2</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 1.3</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
            </div>
        </div>
        
        <div class="sortPages">
            <div class="pageCaption">Page 2</div>
            <div class="sortModules">
                <div class="sortModule">
                    <div class="sortModuleName">module 2.1</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 2.2</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 2.3</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
            </div>
        </div>

        <div class="sortPages">
            <div class="pageCaption">Page 3</div>
            <div class="sortModules">
                <div class="sortModule">
                    <div class="sortModuleName">module 3.1</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 3.2</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
                <div class="sortModule">
                    <div class="sortModuleName">module 3.2</div>
                    <div class="sortModuleSub" style="padding-left: 30px;">sub...</div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        $(document).ready(function(){
        
            $('#sortable').sortable({
                    placeholder:    'blank',
                    item:    'div.sortPages',
                    handle: 'div.pageCaption',
                    revert: true
                }
            );
            
            
            $('#sortable div.sortModules').sortable({
                    connectWith:    '#sortable div.sortModules, div.sortModuleSub',
                    placeholder:    'blank',
                    item:    '.sortModule',
                    revert: true
                }
            );
            
            
            $('#sortable div.sortModuleSub').sortable({
                    connectWith:    '#sortable .sortModules, div.sortModuleSub',
                    placeholder:    'blank',
                    item:    'div.sortModuleSub',
                    revert: true
                }
            );
            
        });
    </script>
        
</body>

Это сообщение отредактировал(а) Dzuchara - 21.10.2009, 21:11

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »