VPF::TreeView с Драгом - Форум программистов

helflip

Дата 4.6.2008, 12:21 (ссылка)

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

Загрузка ...

Шустрый

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

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

Привет всем smile

Столкнулся с проблемкой драга по дереву! Вроде все работает только надо чуток подправить. Как незнаю smile

Есть дерево, нужно сделать так чтобы нельзя было перетаскивать элементы низшего уровня в верхние, а верхние в низшие! Нужно только чтобы перетаскивания происходили внутри уровня! Подскажите пожалуйста! вот код HTML:

Код


<script type="text/javascript" src="src/jquery.js"></script>
<script type="text/javascript" src="src/interface.js"></script>
<ul class="myTree">
    <li class=""><img src="img/territory.png" class="folderImage" /><span class="textHolder">Архив 1</span>
        <ul style="display: none;">
            <li class="treeItem"><img src="img/home.png" class="folderImage" /><span class="textHolder">Помещение 1</span>
                <ul style="display: none;">
                    <li class="treeItem"><img src="img/tombs.gif" class="folderImage" /><span class="textHolder">Стойка 1</span>
                        <ul style="display: none;">
                            <li class="treeItem"><img src="img/tombs_open.gif" class="folderImage" /><span class="textHolder">Полка 1</span>
                                <ul style="display: none;">
                                    <li class="treeItem"><img src="img/box.png" class="folderImage" /><span class="textHolder">Коробка 1</span>
                                        <ul style="display: none;">
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?1">Документ 1</a></span></li>
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?2">Документ 2</a></span></li>
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?3">Документ 3</a></span></li>
                                        </ul>
                                    </li>
                                    <li class="treeItem"><img src="img/box.png" class="folderImage" /><span class="textHolder">Коробка 2</span></li>
                                    <li class="treeItem"><img src="img/box.png" class="folderImage" /><span class="textHolder">Коробка 3</span></li>
                                    <li class="treeItem"><img src="img/korona.png" class="folderImage" /><span class="textHolder">Корона 1</span>
                                        <ul style="display: none;">
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?1">Документ 1</a></span></li>
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?2">Документ 2</a></span></li>
                                            <li class="treeItem"><img src="img/doc.png" class="folderImage" /><span class="textHolder"><a href="?3">Документ 3</a></span></li>
                                        </ul>
                                    </li>
                                    <li class="treeItem"><img src="img/korona.png" class="folderImage" /><span class="textHolder">Корона 2</span></li>
                                </ul>
                            </li>
                            <li class="treeItem"><img src="img/tombs_open.gif" class="folderImage" /><span class="textHolder">Полка 2</span></li>
                            <li class="treeItem"><img src="img/tombs_open.gif" class="folderImage" /><span class="textHolder">Полка 3</span></li>
                        </ul>
                    </li>
                    <li class="treeItem"><img src="img/tombs.gif" class="folderImage" /><span class="textHolder">Стойка 2</span></li>
                    <li class="treeItem"><img src="img/tombs.gif" class="folderImage" /><span class="textHolder">Стойка 3</span></li>
                </ul>
            </li>
</ul>

Это сообщение отредактировал(а) helflip - 4.6.2008, 12:24

--------------------

bars80080

Дата 4.6.2008, 12:25 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

может ещё и скрипты выложишь, которые отвечают за перетаскивания?

helflip

Дата 4.6.2008, 12:25 (ссылка)

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

Загрузка ...

Шустрый

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

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

Да да! Забыл))
Вот JS:

Код


<script type="text/javascript">
$(document).ready(
    function()
    {
        tree = $('#myTree');
        $('li', tree.get(0)).each(
            function()
            {
                subbranch = $('ul', this);
                if (subbranch.size() > 0) {
                    if (subbranch.eq(0).css('display') == 'none') {
                        $(this).prepend('<img src="img/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />');
                    } else {
                        $(this).prepend('<img src="img/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />');
                    }
                } else {
                    $(this).prepend('<img src="img/spacer.gif" width="16" height="16" class="expandImage" />');
                }
            }
        );
        $('img.expandImage', tree.get(0)).click(
            function()
            {
                if (this.src.indexOf('spacer') == -1) {
                    subbranch = $('ul', this.parentNode).eq(0);
                    
                    if (subbranch.css('display') == 'none') {
                        subbranch.show();
                        this.src = 'img/bullet_toggle_minus.png';
                    } else {
                        subbranch.hide();
                        this.src = 'img/bullet_toggle_plus.png';
                    }
                }
            }
        );
        $('span.textHolder').Droppable(
            {
                accept            : 'treeItem',
                hoverclass        : 'dropOver',
                activeclass        : 'fakeClass',
                tollerance        : 'pointer',
                onhover            : function(dragged)
                {
                    if (!this.expanded) {
                        subbranches = $('ul', this.parentNode);
                        if (subbranches.size() > 0) {
                            subbranch = subbranches.eq(0);
                            this.expanded = true;
                            if (subbranch.css('display') == 'none') {
                                var targetBranch = subbranch.get(0);
                                this.expanderTime = window.setTimeout(
                                    function()
                                    {
                                        $(targetBranch).show();
                                        $('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'img/bullet_toggle_minus.png');
                                        $.recallDroppables();
                                    },
                                    500
                                );
                            }
                        }
                    }
                },
                onout            : function()
                {
                    if (this.expanderTime){
                        window.clearTimeout(this.expanderTime);
                        this.expanded = false;
                    }
                },
                ondrop            : function(dropped)
                {
                    if(this.parentNode == dropped)
                        return;
                    if (this.expanderTime){
                        window.clearTimeout(this.expanderTime);
                        this.expanded = false;
                    }
                    subbranch = $('ul', this.parentNode);
                    if (subbranch.size() == 0) {
                        $(this).after('<ul></ul>');
                        subbranch = $('ul', this.parentNode);
                    }
                    oldParent = dropped.parentNode;
                    subbranch.eq(0).append(dropped);
                    oldBranches = $('li', oldParent);
                    if (oldBranches.size() == 0) {
                        $('img.expandImage', oldParent.parentNode).src('img/spacer.gif');
                        $(oldParent).remove();
                    }
                    expander = $('img.expandImage', this.parentNode);
                    if (expander.get(0).src.indexOf('spacer') > -1)
                        expander.get(0).src = 'img/bullet_toggle_minus.png';
                }
            }
        );
        $('li.treeItem').Draggable(
            {
                revert        : true,
                autoSize        : true,
                ghosting        : true/*,
                onStop        : function()
                {
                    $('span.textHolder').each(
                        function()
                        {
                            this.expanded = false;
                        }
                    );
                }*/
            }
        );
    }
);
</script>

Вот кстати пример работы

Это сообщение отредактировал(а) helflip - 4.6.2008, 12:27

--------------------

Ghirik

Дата 4.6.2008, 12:51 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата

Вот кстати пример работы

Ужасно сделано! Пользоваться практически невозможно. Открывал в IE.

--------------------

Отдадим всё клиенту, пускай его машина мучается...

helflip

Дата 4.6.2008, 12:55 (ссылка)

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

Загрузка ...

Шустрый

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

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

Ghirik, В мозиле нормально работает, и использоваться будет только под мозилой. Это для интранет сети я всех на Mozill'ку перевел ))))

А в целом если есть кросбраузерный дерево я буду не против ваших предложений smile

Но главная задача остается!

Это сообщение отредактировал(а) helflip - 4.6.2008, 13:00

--------------------

helflip

Дата 6.6.2008, 09:21 (ссылка)

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

Загрузка ...

Шустрый

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

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

Ну что никто не поможет??? smile

--------------------

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