jquery - 可排序的双列表，具有删除和重新排列元素到正确的层次结构的功能

Question

我有一个双重列表(相互连接)，其中第一个列表可以删除到第二个列表。 请参阅下面的我的 fiddle 链接以了解.. 在初始屏幕上单击按钮“运行 process_test_json”，列表显示在此处。 如果拖动到第二个列表，每个元素都会带有删除图标。 删除按钮具有单击事件，该事件会将元素发送回其原始位置。

一切就绪，一切正常，但在第二个元素的情况下，它无法移动，因为它有子列表>子列表。

请建议我可以通过适当的缩进按升序重新排列的代码，请随意编辑我的 fiddle 。

删除会将元素发送回其先前的原始位置。 假设我将第二个元素从第一个列表移动到第二个列表， 然后最后删除第二个元素并在此处看到不正确的层次结构。

列表应如下所示:正确图像 result screen 请在我的 FIDDLE fiddle code 上发表此评论后更新代码

//////////////////////////////////////////////////////////////////////////////////////////////////////////////Statement to make hierarchy of the elements///////////////////////////////////////////////////////////////////////

Answer 1

解决了上述问题。

如果单击删除按钮，每个元素都会反转到原来的位置， 该功能将起作用，

reArangeList: function(elem){
    var that = this;
    var parentIndexData = that.splitMultiple(String(elem.data('index')),'_'); 
    var updatedIndex = [];
    var joinValues;
    var superContainer = $(elem).attr('superContainer');
    for(var i=0; i<parentIndexData.length-1; i++){
        updatedIndex.push(parentIndexData[i]);
    }
    joinValues = updatedIndex.join('_');
    //var currentParent = $("."+superContainer+" li[data-index='" + joinValues + "' ]>ol")
    //console.log(currentParent.find('li').length)
    $("."+superContainer+" li[data-index='" + joinValues + "' ]>ol").append(elem);

},

代码如下:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //call the Function it will Rearrange Element according to previous format
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////


    $("."+superContainer).find('li').each(function(){
        if(String($(this).data('index')).split('_').length > 1){
            // Function Will Rearrange List
            mostParentContext.reArangeList($(this));
            mostParentContext.appendDivInSpanFn($("."+superContainer));
        }
    })