拖动子类别成为类别后获取信息

Question

我解释我的需求之后，我可以将一个元素拖到类别中，将其变成子类别，也可以将一个子类别拖到它的类别中。

我被困在幻灯片后恢复父元素的级别上

我在拖动子类别成为类别时陷入困境

[如果我将类别拖到类别下，则当前有此信息

我在放置函数中进行了处理

此我的代码

$(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder",
    update: function(event, ui) {;     
	},
    start: function(event, ui) {
        if(ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
        }
        else{ 
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
        }
    },
	sort: function(event, ui) {
        var pos;
        if(ui.helper.hasClass('second-level')){
            pos = ui.position.left+20; 
            $('#cursor').text(ui.position.left+20);
        }
        else{
            pos = ui.position.left; 
      
            $('#cursor').text(ui.position.left);    
        }
        if(pos >= 32 && !ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
            ui.helper.addClass('second-level');
                        ui.helper.removeClass('first-level');
            ui.helper.prev(".first-level").addClass('kkk');
                  ui.helper.attr("data-parent","subcat");
        }
        else if(pos < 25 && ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
            ui.helper.removeClass('second-level');
                ui.helper.attr("data-parent","cat");
                      ui.helper.parent().removeClass('kkk');
        }
    }
});
$(".item").droppable({
    accept: ".item",
    hoverClass: "dragHover",
       drop: function(event, ui) {
        if ($(this).is(".first-level"))
          {
             console.log("first Level Drop",$(this).data("id-cat"))
               var subcategoryfils = ui.helper.attr('data-id-cat');
                console.log(subcategoryfils);
                 console.log(ui.draggable.context.innerText)  
            }  else{
                console.log("second Level Drop",$(this).prev().last(".first-level").data("id-cat"), $(this).data("id-cat")) 
                }
        }, 
    over: function( event, ui ) {
        // over
    },
    activate: function( event, ui ) {
        // activate
    }
});
.items {
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 0;
    width:480;
}
.first-level{
  background:red;
}
.second-level{
  background:black;
}
.item {
    background: #fff;
    border: 1px solid #ddd;
    cursor: move;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    width: 480px;
}
.second-level {
    margin-left: 20px;
    width: 460px;
}
.dragHover {
    border-color: blue;
    color: blue;
}
.placeholder {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 500px;
}
span.deletecategorie {
    z-index: 999;
    cursor: pointer;
}
.placeholder-sub {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 480px;
    margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="o">
<ul class="items">
    <li class="item first-level" data-id-cat="1" data-parent="cat">Cat1  <span class="deletecategorie">delete</span></li>
    <li class="item first-level"data-id-cat="2" data-parent="cat">Sub cat 1 <span class="deletecategorie">delete</span></li>
    <li class="item first-level" data-id-cat="3" data-parent="cat">Sub cat 2<span class="deletecategorie">delete</span></li>
       <li class="item first-level" data-id-cat="4" data-parent="cat">Sub cat 3 <span class="deletecategorie">delete</span></li>
    <li class="item first-level" data-id-cat="5" data-parent="cat">cat2<span class="deletecategorie">delete</span></li>
    <li class="item first-level" data-id-cat="6" data-parent="cat">cat3 <span class="deletecategorie">delete</span></li>
      <li class="item first-level" data-id-cat="7" data-parent="cat">cat4 <span class="deletecategorie">delete</span></li>
             <li class="item first-level" data-id-cat="8" data-parent="subcat">Sub cat 8 <span class="deletecategorie">delete</span></li>
</ul>
</div>

类别中的图1案例子类别

图2子类别成为类别

我解释我的需求后，我可以将一个元素拖动到类别中，它成为子类别，也可以拖动一个子类别，它成为类别，我陷入了恢复...的水平。]

Answer 1

我建议您调整HTML，以便有一个列表列表。

<ul>
  <li>Cat
    <ul>
      <li>Item</li>
    </ul>
  </li>
</ul>