标签: nested-sortable

有没有办法嵌套jQuery sortables？与嵌套容器一样,不是嵌套列表.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container">
    <div class="item"></div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="item"></div>
</div>

$('.container').sortable({
    connectWith: '.container'
});

http://jsfiddle.net/ExLqv/2/

这个例子非常有效,但是当我删除嵌套容器时,我收到一个错误:

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. 

我认为这是因为当拖动container它时,它位于鼠标下方,所以当我放下它时,它会尝试将它放在自身内部.

我有一个工作,虽然不理想所以问题仍然存在.

$('.container').sortable({
    connectWith: '.container:not(.ui-sortable-helper)',
    tolerance: "pointer",
    cursorAt: { left: -50 }
});

http://jsfiddle.net/ExLqv/8/

我正在使用jQuery nestedsortable插件来排序ul列表.但有时我需要禁用并启用它.使用ui可以轻松排序,但无法通过嵌套列表找到方法.

我试着用:

$("ul").unbind(".nestedSortable");

但是没有办法再次启用它.感谢帮助.

更新: 分析插件源代码有帮助.

$(".tree ul").nestedSortable('destroy');

将完全破坏嵌套的可排序实例.

我试图在jQuery DataTable和jQuery nestedSortable之间拖动.问题是,当我删除我的可拖动对象(来自DataTable)时,它将恢复为表行,而不是li对象(以适应nestedSortable).一个例子是的jsfiddle 这里.我的理想情况就像这个jQuery UI示例,但源是一个数据表,目标是一个nestedSortable ......

我发现这个修复程序通过为draggable插件创建我自己的"connectWith"选项来连接这两个元素,所以我可以从表中删除到sortable.

我还想出了如何使用自定义帮助器使占位符看起来像是一个li对象,但我无法弄清楚如何让drop对象等于助手,而不是原始的表行.我曾尝试在.draggable(stop),.fromsSortable(stop)和.nestedSortable(receive)事件中玩游戏,但没有运气.有人可以指点我正确的方向吗？我在文档中遗漏了什么吗？

谢谢!对任何真正阅读此内容的人来说,节日快乐...

我的基本代码:

$('#example_table').dataTable({
    'sPaginationType': 'full_numbers',
    'bJQueryUI':true
});

$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: '.disclose',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: true,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 4,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true,
    stop: function(e, ui) {
    },
    connectWith: '#example_table',
    receive: function( e, ui ) {
    }
});

$( '#example_table > tbody > tr').draggable({
    connectToNestedSortable: "#structure",
    helper: function( event …

EDIT 3: Just to summarize what became quite a long question in the hope that someone might find it easier to get the gist of it and be able to help more easily:

What I want is to get the jsfiddle # 2 below (under EDIT 2) to work, in the sense that it should correctly drop multiple items in the right place, when selected and dragged.

Original question:

I'm trying to figure out how to make nestedSortable allow multiple …

我正在使用jquery-ui sortable，我在另一个里面有一个可排序的！重点是当我尝试使用sortstop函数时，parent sortable也会运行（！请帮帮我！

<div class="sortable1">
<div class="s1">
    <div class="sortable2">
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
        <div class="s2"></div>
    </div>
</div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>

JS：

//parents
    $( ".sortable1" ).sortable({
        items: ".s1"
    });
    $( ".sortable1" ).disableSelection();
    $( ".sortable1" ).on( "sortstop", function( event, ui ){
        //do sort of parents
    });


    //children
    $( ".sortable2" ).sortable({
        items: ".s2"
    });
    $( ".sortable2" ).disableSelection();
    $( ".sortable2" ).on( "sortstop", function( event, ui ){
        //do sort of childrens
    });

所以,我正在使用nestedSortable插件,我需要使用"awesome_nested_set"gem将数据发送回rails应用程序.我想使用嵌套在nestedSortable插件中的序列化函数,但我不明白如何使用它.

当我尝试在插件的网站上用firebug查看源代码时,我似乎无法找到"序列化"演示发生的位置,所以我只是假设它是如何工作的,但它没有:

$(document).ready(function() {
    $('ol.sortable').nestedSortable({
        disableNesting : 'no-nest',
        forcePlaceholderSize : true,
        handle : 'div',
        helper : 'clone',
        items : 'li',
        opacity : .6,
        placeholder : 'placeholder',
        revert : 250,
        tabSize : 20,
        tolerance : 'pointer',
        toleranceElement : '> div'
    });
    $("#send").click(function(){
        var data = $("ol.sortable").serialize();
        alert(data);
    });
});

谢谢你的帮助!

我正在使用这个嵌套的可排序插件http://mjsarfatti.com/sandbox/nestedSortable/来从我的内容管理系统中对图像幻灯片进行排序.

我尝试使用html5 ondrop事件,以便每当发生一个drop事件时,sort将通过ajax post保存,但仍然在drop下不会转到save_order函数

HTML:

<div ondrop="save_order(event)" ondragover="return false;>
    <ol class="sortable">
        <li id="list_1" draggable="true" class="mjs-nestedSortable-no-nesting"><div><img src="{image_path}"/></div></li>
        <li id="list_2" draggable="true" class="mjs-nestedSortable-no-nesting"><div><img src="{image_path}"/></div></li>
    </ol>
</div>

JS:

$(document).ready(function(){
    $('.sortable').nestedSortable({
        disableNesting  : 'mjs-nestedSortable-no-nesting',
        handle          : 'div',
        items           : 'li',
        toleranceElement: '> div'
    });
});

function save_order(event)
{
   serialized = $('ol.sortable').nestedSortable('serialize');
    $.post({my_ajax_url}',serialized,function(data){
      alert('save!');
    });
}

我发现了一个很好的脚本,http://mjsarfatti.com/sandbox/nestedSortable/,这对我来说几乎是完美的.我只是找不到一件小事.

我想禁用一些要拖动的项目.我查看了自述文件,尝试了一些选项,但没有得到我想要的东西.

有人能告诉我如何禁用要拖动的项目吗？

我想使用AngularJS创建嵌套的可排序列表.我不确定那里有现成的解决方案.我尝试使用https://github.com/mostr/angular-ui-multi-sortable,它工作正常,但不幸的是,似乎它不接受嵌套列表.

我真正需要的是拥有多个篮子,我可以对这些篮子进行重新排序,还可以从篮子中拖放产品(从一个篮子到另一个篮子).

有没有人有想法/解决方案如何使用它？

谢谢!

我们正在使用jQuery Sortable库来进行类似于WordPress的动态菜单管理。并且它具有多级管理。

<ol id="my-nav">
    <li data-id="unique-id-here" data-label="">
        <span>My Label</span>
        <input type="text" class="label-change">
        <ol><!-- PLACEHOLDER FOR SUBMENU --></ol>
    </li>
</ol>

<textarea id="output"></textarea>

我们想使用继承的输入字段来更新菜单标签。所以我们做了如下的事情：

$('body').on('keyup change', '.label-change', function () {
    var this_menu_label_field = $(this);
    var this_field_val        = this_menu_label_field.val();
    var this_menu_nav         = this_menu_label_field.parents('li');

    // Update the text string inside the <li>
    this_menu_nav.find('span').html(this_field_val);

    // Update the data-label attribute
    this_menu_nav.attr('data-label', this_field_val).sortable('refresh');

    var serialized_data = menu_container.sortable('serialize').get();
    $('#output').val(JSON.stringify(serialized_data));
});

该代码正在更新<span>各自内部的字符串<li>，并更改data-label。但不幸的是，它仅将第一次击键更新为#output文本区域。

例如：如果我们键入“ Whatever”，则可能需要“ W”或“ Wha”。并且没有更多的击键被更新到#output。但是在<span> …