Fatal编程技术网
  • jquery/
  • Jquery nestedSortable阻止将元素拖动到顶层

Jquery nestedSortable阻止将元素拖动到顶层

jquery html

Jquery nestedSortable阻止将元素拖动到顶层,jquery,html,nested-sortable,Jquery,Html,Nested Sortable,我有两个问题 此nestedSortable在此代码中不起作用，问题出在哪里 我想阻止用户将子元素拖动到顶层（底部），我知道库不允许这样做，是否有调整 以下是我的全部代码： <html> <head> <style> html { background-color: #eee; } body { color: #

我有两个问题

  • 此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>

    
html{
背景色：#eee；
}
身体{
颜色：#333；
背景色：#fff；
字体大小：13px；
字体系列：“Helvetica Neue”，Corbel，“Nimbus Sans L”，Helvetica，Arial，Sans serif；
填充物：2em 4em；
宽度：860px；
保证金：0自动；
}
预编码{
字体大小：12px；
}
前{
宽度：100%；
溢出：自动；
}
小的{
字体大小：90%；
}
小代码{
字体大小：11px；
}
.占位符{
背景色：#cfcfcf；
}
.ui嵌套排序错误{
背景：#fbe3e4；
颜色：#8a1f11；
}
保险商实验室{
保证金：0；
填充：0；
左侧填充：30px；
}
可排序的，可排序的{
边际：0.25px；
填充：0；
列表样式类型：无；
}
可排序的{
保证金：4em0；
}
李先生{
利润率：7px0；
填充：0；
}
.可排序李分区{
边框：1px纯黑；
填充：3倍；
保证金：0；
光标：移动；
}
h1{
字号：2em；
页边距底部：0；
}
氢{
字体大小：1.2米；
字体大小：正常；
字体：斜体；
边缘顶部：.2米；
边缘底部：1.5em；
}
h3{
字号：1em；
利润率：1米0.3米；；
}
p、 ol、ul、pre、表格{
边际上限：0；
边缘底部：1米；
}
dl{
保证金：0；
}
dd{
保证金：0；
填充：01.5em；
}
代码{
背景：#e5；
}
输入{
垂直对齐：文本底部；
}
.通知{
颜色：#c33；
}
$（文档）.ready（函数（）{
$（'ul.sortable'）.nestedSortable（{
废除“无巢”，
大小：true，
句柄：“div”，
助手：“克隆”，
项目:"李",，
最高级别：3，
不透明度：.6，
占位符：“占位符”，
回复：250，
tabSize:25，
公差：“指针”，
公差元素：'>div'
}); });

      
第1项
第2项

        
子项2.1
子项2.2
子项2.3
子项2.4

      
第3项（无嵌套）
第4项（无嵌套）
第5项
第6项

        
子项6.1
子项6.2（无嵌套）
子项6.3
子项6.4
第7项
第8项
    谢谢！：）

    编辑：下面是一个工作示例 如果我能得到这份工作，也许我可以多看看我的第二点

    编辑2：我已经按照一个答案告诉我的那样更改了库，但是firefox挂起了，还有一个没有响应的脚本

    这是小提琴：

    编辑3：有人有主意吗

    编辑4：我已经解决了我的问题之一：嵌套的可排序js没有很好地包含：S

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

    从插件网站：

    要求：

    jQuery 1.4+

    jqueryui排序表1.8+

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

    <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>
    我用
    $.extend（）
    对代码进行了一点修改，我想我已经非常接近-->问题二：

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

            isAllowed: function (item, parent) {
            if (parent == null) { //Parent == null means the root.
                return false;
            }
        }
    请参阅此处的更多信息：

    没错，我已经知道了，您使用的jQuery UI v1.6版本比要求的v1.8版本旧，请更改为h是的，1.8版本失败。。。但现在我的兄弟失败了，告诉我有一个没有反应的脚本。。。但是+1这是一个很好的点浏览器，你有问题。