JquerynestedSortable阻止将元素拖动到顶层

发布于 2024-12-15 18:19:40 字数 5983 浏览 0 评论 0原文

我有两个问题，

此nestedSortable 在此代码中不起作用，问题出在哪里？
我想阻止用户将子元素拖动到顶层（基础），我知道库不允许这样做，有调整吗？

这是我的全部代码：

 <html>
     <head>
        <style>
            html {
            background-color: #eee;
            }

            body {
            color: #333;
            background-color: #fff;
            font-size: 13px;
            font-family: "Helvetica Neue", Corbel, "Nimbus Sans L", Helvetica, Arial, sans-serif;
            padding: 2em 4em;
            width: 860px;
            margin: 0 auto;
            }

            pre, code {
            font-size: 12px;
            }

            pre {
            width: 100%;
            overflow: auto;
            }

            small {
            font-size: 90%;
            }

            small code {
            font-size: 11px;
            }

            .placeholder {
            background-color: #cfcfcf;
            }

            .ui-nestedSortable-error {
            background:#fbe3e4;
            color:#8a1f11;
            }

            ul{
            margin: 0;
            padding: 0;
            padding-left: 30px;
            }

            ul.sortable, ul.sortable ul{
            margin: 0 0 0 25px;
            padding: 0;
            list-style-type: none;
            }

            ul.sortable {
            margin: 4em 0;
            }

            .sortable li {
            margin: 7px 0 0 0;
            padding: 0;
            }

            .sortable li div {
            border: 1px solid black;
            padding: 3px;
            margin: 0;
            cursor: move;
            }

            h1 {
            font-size: 2em;
            margin-bottom: 0;
             }

             h2 {
             font-size: 1.2em;
             font-weight: normal;
             font-style: italic;
             margin-top: .2em;
             margin-bottom: 1.5em;
             }

             h3 {
             font-size: 1em;
             margin: 1em 0 .3em;;
             }

             p, ol, ul, pre, form {
             margin-top: 0;
             margin-bottom: 1em;
             }

             dl {
             margin: 0;
             }

             dd {
             margin: 0;
             padding: 0 0 0 1.5em;
             }

             code {
             background: #e5e5e5;
             }

             input {
             vertical-align: text-bottom;
             }

             .notice {
             color: #c33;
             }


        </style>
        <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
        <script  src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js' type='text/javascript'/>
        <script  src='http://mjsarfatti.com/sandbox/nestedSortable/jquery.ui.nestedSortable.js' type='text/javascript'/>
        <script type='text/javascript'>
                 $(document).ready(function(){

                     $('ul.sortable').nestedSortable({             
                         disableNesting: 'no-nest',
                               forcePlaceholderSize: true,
                                handle: 'div',
                                helper:    'clone',
                               items: 'li',
                                maxLevels: 3,
                                opacity: .6,
                                placeholder: 'placeholder',
                                revert: 250,
                                tabSize: 25,
                                tolerance: 'pointer',
                                toleranceElement: '> div'
                     }); });


        </script>
    </head>
    <body>

        <ul class="sortable">         
             <li id="list_1"><div>Item 1</div> </li>
             <li id="list_2"><div>Item 2</div> </li>
                    <ul>
                       <li id="list_3"><div>Sub Item 2.1</div> </li>
                        <li id="list_4"><div>Sub Item 2.2</div> </li>
                       <li id="list_5"><div>Sub Item 2.3</div> </li>
                        <li id="list_6"><div>Sub Item 2.4</div> </li>
                    </ul>
                <li id="list_7" class="no-nest"><div>Item 3 (no-nesting)</div> </li>
                <li id="list_8" class="no-nest"><div>Item 4 (no-nesting)</div> </li>
                <li id="list_9"><div>Item 5</div> </li>
                <li id="list_10"><div>Item 6</div> </li>
                    <ul>
                        <li id="list_11"><div>Sub Item 6.1</div> </li>
                        <li id="list_12" class="no-nest"><div>Sub Item 6.2 (no-nesting)</div> </li>
                        <li id="list_13"><div>Sub Item 6.3</div> </li>
                       <li id="list_14"><div>Sub Item 6.4</div> </li>
                    </ul>        <li id="list_15"><div>Item 7</div> </li>
                <li id="list_16"><div>Item 8</div> </li>
            </ul>
    </body>
</html>

谢谢！ :)

编辑：这是一个工作示例 http://mjsarfatti.com/sandbox/nestedSortable/ 如果我只能完成这项工作，也许我可以更多地寻找我的第二点

编辑2：我已经更改了库，正如答案之一告诉我的那样，但是火狐挂起并且有无响应的脚本

这是小提琴：http://jsfiddle.net/dAwEe/2/

编辑3 : 有人有主意吗？

编辑4： http://jsfiddle.net/dAwEe/3/ 我已经解决了我的问题：嵌套的可排序js没有很好地包含：S

现在有人对问题二有想法吗？

原文

I have two problem,

This nestedSortable is not working in this code, where's the problem ?
I want to block a user to drag an sub-element to the top level (base), i know the library does not allow it, is there a tweak ?

Here is all my code :

 <html>
     <head>
        <style>
            html {
            background-color: #eee;
            }

            body {
            color: #333;
            background-color: #fff;
            font-size: 13px;
            font-family: "Helvetica Neue", Corbel, "Nimbus Sans L", Helvetica, Arial, sans-serif;
            padding: 2em 4em;
            width: 860px;
            margin: 0 auto;
            }

            pre, code {
            font-size: 12px;
            }

            pre {
            width: 100%;
            overflow: auto;
            }

            small {
            font-size: 90%;
            }

            small code {
            font-size: 11px;
            }

            .placeholder {
            background-color: #cfcfcf;
            }

            .ui-nestedSortable-error {
            background:#fbe3e4;
            color:#8a1f11;
            }

            ul{
            margin: 0;
            padding: 0;
            padding-left: 30px;
            }

            ul.sortable, ul.sortable ul{
            margin: 0 0 0 25px;
            padding: 0;
            list-style-type: none;
            }

            ul.sortable {
            margin: 4em 0;
            }

            .sortable li {
            margin: 7px 0 0 0;
            padding: 0;
            }

            .sortable li div {
            border: 1px solid black;
            padding: 3px;
            margin: 0;
            cursor: move;
            }

            h1 {
            font-size: 2em;
            margin-bottom: 0;
             }

             h2 {
             font-size: 1.2em;
             font-weight: normal;
             font-style: italic;
             margin-top: .2em;
             margin-bottom: 1.5em;
             }

             h3 {
             font-size: 1em;
             margin: 1em 0 .3em;;
             }

             p, ol, ul, pre, form {
             margin-top: 0;
             margin-bottom: 1em;
             }

             dl {
             margin: 0;
             }

             dd {
             margin: 0;
             padding: 0 0 0 1.5em;
             }

             code {
             background: #e5e5e5;
             }

             input {
             vertical-align: text-bottom;
             }

             .notice {
             color: #c33;
             }


        </style>
        <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
        <script  src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js' type='text/javascript'/>
        <script  src='http://mjsarfatti.com/sandbox/nestedSortable/jquery.ui.nestedSortable.js' type='text/javascript'/>
        <script type='text/javascript'>
                 $(document).ready(function(){

                     $('ul.sortable').nestedSortable({             
                         disableNesting: 'no-nest',
                               forcePlaceholderSize: true,
                                handle: 'div',
                                helper:    'clone',
                               items: 'li',
                                maxLevels: 3,
                                opacity: .6,
                                placeholder: 'placeholder',
                                revert: 250,
                                tabSize: 25,
                                tolerance: 'pointer',
                                toleranceElement: '> div'
                     }); });


        </script>
    </head>
    <body>

        <ul class="sortable">         
             <li id="list_1"><div>Item 1</div> </li>
             <li id="list_2"><div>Item 2</div> </li>
                    <ul>
                       <li id="list_3"><div>Sub Item 2.1</div> </li>
                        <li id="list_4"><div>Sub Item 2.2</div> </li>
                       <li id="list_5"><div>Sub Item 2.3</div> </li>
                        <li id="list_6"><div>Sub Item 2.4</div> </li>
                    </ul>
                <li id="list_7" class="no-nest"><div>Item 3 (no-nesting)</div> </li>
                <li id="list_8" class="no-nest"><div>Item 4 (no-nesting)</div> </li>
                <li id="list_9"><div>Item 5</div> </li>
                <li id="list_10"><div>Item 6</div> </li>
                    <ul>
                        <li id="list_11"><div>Sub Item 6.1</div> </li>
                        <li id="list_12" class="no-nest"><div>Sub Item 6.2 (no-nesting)</div> </li>
                        <li id="list_13"><div>Sub Item 6.3</div> </li>
                       <li id="list_14"><div>Sub Item 6.4</div> </li>
                    </ul>        <li id="list_15"><div>Item 7</div> </li>
                <li id="list_16"><div>Item 8</div> </li>
            </ul>
    </body>
</html>

Thanks ! :)

EDIT : here is a working exemple http://mjsarfatti.com/sandbox/nestedSortable/
If I can only get this work, maybe I could look more for my second point

EDIT 2 : I'Ve changed the library as one of the answer told me, but firefox is hanging and there's un unresponsive script

Here is the fiddle : http://jsfiddle.net/dAwEe/2/

EDIT 3 : Someone have an idea ?

EDIT 4 : http://jsfiddle.net/dAwEe/3/ I've fixed my problem one : The nested sortable js was not well include :S

Now someone have an idea for the problem two ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

a√萤火虫的光℡ 2024-12-22 18:19:40

我用 $.extend() 稍微修改了代码，我想我已经非常接近了 --> http://jsfiddle.net/Galled/dAwEe/85/

回复收藏 0 原文

临风闻羌笛 2024-12-22 18:19:40

来自插件网站：

要求：
<块引用>
jQuery 1.4+
jQuery UI 可排序 1.8+

回复收藏 0 原文

昇り龍 2024-12-22 18:19:40

可能无法解决您的问题，但并非所有浏览器都支持脚本标记的空标记表示法。您需要使用结束脚本标记来关闭它们。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

需要是

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

Probably will not solve your problem, but not all browsers support empty tag notation for script tags. You need to close them with a closing script tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Needs to be

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

回复收藏 0 原文

锦爱 2024-12-22 18:19:40

问题二：

isAllowed 可用于启用或阻止某个位置。要阻止根位置，您可以使用如下代码：

        isAllowed: function (item, parent) {
            if (parent == null) { //Parent == null means the root.
                return false;
            }
        }

请在此处查看更多信息：NestedSortable：使用 connectWith() 时 isAllowed() 不起作用

Problem two:

isAllowed can be used to enable or block a position. To block the root position, you can use codes like this:

        isAllowed: function (item, parent) {
            if (parent == null) { //Parent == null means the root.
                return false;
            }
        }

see more information here: NestedSortable: isAllowed() does not work when connectWith() is used

回复收藏 0 原文

~没有更多了~