Question

我正在使用nestedsortable jQuery（http://mjsarfatti.com/sandbox/nestedSortable/）。在列表中，用户可以将项目拖放到3级。基本上，该项目可以有父亲和祖父。

如果项目没有子项，则会附加包含输入文件的span元素。如果项目是父亲或祖父，则无法显示输入文件元素。因此，当我将项目拖放到另一个项目（父亲）中时，这是有效的。但是当我在之前删除的项目中拖放项目时，输入文件不会消失。

我发布了5张图片以便更好地理解。

例如：

代码：

<ol class="sortable">
        <li id="list_1"><div><span class="disclose"><span></span></span>Item 1<span title="Click to delete item." data-id="1" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1<span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2<span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_4"><div><span class="disclose"><span></span></span>Item 2<span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_5"><div><span class="disclose"><span></span></span>Item 3<span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)<span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                <li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2<span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1<span title="Click to delete item." data-id="8" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_9"><div><span class="disclose"><span></span></span>Item 4<span title="Click to delete item." data-id="9" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_10"><div><span class="disclose"><span></span></span>Item 5<span title="Click to delete item." data-id="10" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
    </ol>

使用Javascript：

$('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        maxLevels: 3,
        isTree: true,
        expandOnHover: 700,
        startCollapsed: true,
        stop: function(event, ui) {
            //get item id
            var id = $(ui.item).attr('id');
            var res = id.substr(5);

            //check the item have child
            if($('#list_'+res).find('ol').length != 0) {
                //The item have child!
                $(this).parent('span.file_upload').remove();
            } else {
                //The item don't have child!
                //check the item have father
                if ($('#list_'+res).parent().is('ol.sortable')) {
                    //The item don't have father
                    $('#list_'+res).find('span.file_upload').remove();
                } else {
                    //The item have father!
                    //avoid multiple button file (only one!)
                    if ($('#list_'+res).find('span.file_upload').length == 0) {
                        //insert the file button
                        $('#list_'+res).append(
                            '<span class="file_upload" title="Click to upload a file." id="res" class="deleteMenu">'
                            + '<input name="upload_file" type="file" class="new_file" />'
                            + '</span>');
                    }
                }
            }
        }

    });

Answer 1

我提出了另一种方法。每次删除所有文件上载跨度并在需要时添加跨度，而不是添加/删除单个文件上载。我不确定我是否完全理解我们应该或不应该有上传跨度的逻辑。因此，您需要在下面的示例中进行更改：

HTML

<div class="template" style="display:none">
    <span class="file_upload" class="deleteMenu">
        <input name="upload_file" type="file" class="new_file" />
    </span>
</div>

JS

var $fu_span;

$(document).ready(function(){    
    $fu_span = $("div.template").html();
    $("div.template").remove();
    $('ol.sortable').nestedSortable({
        ...
        stop: mount_file_uploads
    });
});

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    $root.find("span.file_upload").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

JSFiddle

<强>更新 OP描述了一种情况，我们希望添加一个文件上传输入，但事实并非如此。检查代码我意识到，如果你将一个独子项目移到别处，它的前父项不会得到mjs-nestedSortable-leaf类，而空<ol>仍然存在。

该插件不会公开任何方法来发现叶子节点，因此我们使用其内部状态来查找它们。

我报告了这个issue但是，由于没有api方法，维护者可能不认为这是 bug 。

无论如何，我添加了几行作为解决方法。以下是更新mount_file_uploads功能：

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    var $ol;
    $root.find("span.file_upload").remove();
    $root.find("ol").each(function(){
        $ol = $(this);
        if($ol.children().length === 0) {
            $ol.addClass("empty-ol");
            $ol.parent().addClass("mjs-nestedSortable-leaf");
        }
    });
    $("ol.empty-ol").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

Updated JSFiddle

如果有child-jquery，则删除元素中的特定范围

1 个答案: