Форум

micscr · #11 (**permalink**) 10.07.2018, 13:30

Сообщение от Nexus

Атрибуты не перезаписываются, но данные доступные из атрибута будут сохранены еще и в ram. Имеет ли это смысл?

Там во внутреннем data будет храниться еще другая разная служебная информация, вот хочу чтобы все было унифицировано, все через data(), а не перемешано когда что то в атрибутах, что то в data

j0hnik · #12 (**permalink**) 10.07.2018, 13:35

Сообщение от micscr

Редактирование меню сайта (расположения позиций).

Чтобы пользователи могли редактировать?

micscr · #13 (**permalink**) 10.07.2018, 13:39

Сообщение от j0hnik

Чтобы пользователи могли редактировать?

пользователи с правами - модераторы, админы, ...

j0hnik · #14 (**permalink**) 10.07.2018, 13:50

micscr,
Понятно, на счет ie удивляться не стоит. это не единственная проблема.

Rise · #15 (**permalink**) 10.07.2018, 13:53

micscr,
Нужно только li местами менять в пределах своего ul методом drag and drop?

micscr · #16 (**permalink**) 10.07.2018, 14:43

Сообщение от Rise

micscr,
Нужно только li местами менять в пределах своего ul методом drag and drop?

Нет, перетаскивать куда угодно.
Вот пример (вход - moderator/moderator)

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

micscr · #17 (**permalink**) 10.07.2018, 14:52

Текущая версия пока - такая

Думаете достаточно onselectstart="return false" чтобы не выделяло текст?

Rise · #18 (**permalink**) 10.07.2018, 14:59

У вас там jQuery UI 1.12.1 есть, а у того есть https://jqueryui.com/sortable/.

Минутка рекламы) узнать наличие или версию jQuery или jQuery UI в один клик

micscr · #19 (**permalink**) 11.07.2018, 10:49

Сообщение от Rise

sortable

sortable разве сможет лист перетащить как потомок другого листа?

Гляньте текущую версию, вроде более менее?

Rise · #20 (**permalink**) 11.07.2018, 17:19

Сможет конечно, что ему стоит:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable 1</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

<style>
body > ul { width: 300px; }
ul, li, span { padding: 5px; border: 1px solid black; }
ul { background: red; list-style: none; }
li { background: blue; }
span { background: green; display: inline-block; }
</style>

<ul>
    <li>
        <span>11111</span>
        <ul></ul>
    </li>
    <li>
        <span>22222</span>
        <ul></ul>
    </li>
    <li>
        <span>33333</span>
        <ul>
            <li>
                <span>33333-11111</span>
                <ul></ul>
            </li>
            <li>
                <span>33333-22222</span>
                <ul></ul>
            </li>
        </ul>
    </li>
    <li>
        <span>44444</span>
        <ul></ul>
    </li>
    <li>
        <span>55555</span>
        <ul>
            <li>
                <span>55555-11111</span>
                <ul>
                    <li>
                        <span>55555-11111-11111</span>
                        <ul></ul>
                    </li>
                    <li>
                        <span>55555-11111-22222</span>
                        <ul></ul>
                    </li>
                    <li>
                        <span>55555-11111-33333</span>
                        <ul></ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>55555-22222</span>
                <ul></ul>
            </li>
        </ul>
    </li>
    <li>
        <span>66666</span>
        <ul></ul>
    </li>
</ul>

<script>
$('ul').sortable({
    connectWith: 'ul',
    forcePlaceholderSize: true,
    placeholder: 'ui-state-highlight'
});
</script>

</body>
</html>

Просто без span:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable 2</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

<style>
body > ul { width: 300px; }
ul, li { padding: 5px; border: 1px solid black; }
ul { background: red; list-style: none; }
li { background: blue; }
</style>

<ul>
    <li>
        <ul>
            <li class="title">11111</li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="title">22222</li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="title">33333</li>
            <li>
                <ul>
                    <li class="title">33333-11111</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li class="title">33333-22222</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="title">44444</li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="title">55555</li>
            <li>
                <ul>
                    <li class="title">55555-11111</li>
                    <li>
                        <ul>
                            <li class="title">55555-11111-11111</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li class="title">55555-11111-22222</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li class="title">55555-11111-33333</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <ul>
                    <li class="title">55555-22222</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="title">66666</li>
        </ul>
    </li>
</ul>

<script>
$('ul').sortable({
    connectWith: 'ul',
    forcePlaceholderSize: true,
    items: 'li:not(.title)',
    placeholder: 'ui-state-highlight'
});
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript