Folks, I'm using jQuery UI, simple ol > Li operation with draggable and droppable options.

I have two li items, category and subcategory.

My aim is to allow the user to drag multiple new categories and sub-categories into the exiting list.

I am able to add multiple categories and subcategories to existing list loaded at the time of document refresh. However the newly appended li category does not accept subcategory unless the page is refreshed.

<ol class="list">
<li class="category"> a</li>
<li class="category"> b</li>
<li class="category"> c
<ol>
<li class="subcategory"> c1</li>
<li class="subcategory"> c2</li>
</ol>
</li>
</ol>

I can add new category and subcategory. But let say I add new category d, I will like to add a subcategory to it. The only way it works, is that I save the state and refresh the page.

I will like user to build their entire desired list and save at the end without having to refresh the page multiple time in between.

so for category, I think I'm pretty close but can't get it to register to droppable object.

Any help is much appreciated.

drop: function(event, ui) {
  $('.list').append(ui.draggable.clone(true).detach().addClass('ui-droppable ui-state-highlight').removeClass('ui-draggable ui-draggable-handle'));

}

Jsfiddle https://jsfiddle.net/ozzie6935/8mch0r1k/6/

Thanks

CodePudding user response：

It's not clear what you are trying to accomplish from your post.

I have put together this example that might help you.

$(function() {
  $(".list .subcategory").draggable();
  $(".list").droppable({
    drop: function(event, ui) {
      var newItem = ui.draggable.clone();
      ui.draggable.remove();
      newItem
        .addClass("ui-state-highlight")
        .removeClass('ui-draggable ui-draggable-handle')
        .attr("style", "");
      $('.list').append(newItem);
    }
  });
});

.list .category,
.list .subcategory {
  width: 150px;
  padding: 0.25em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ol class="list">
  <li class="category"> a</li>
  <li class="category"> b</li>
  <li class="category"> c
    <ol>
      <li class="subcategory"> c1</li>
      <li class="subcategory"> c2</li>
    </ol>
  </li>
</ol>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Update

Please see: https://jsfiddle.net/Twisty/b28utk0r/8/

JavaScript

$(function() {

  function makeParentDrop(target) {
    $(target).droppable({
      tolerance: 'pointer',
      accept: "#draggable li.child",
      drop: function(event, ui) {
        alert("dropped, do something ... ");
      }
    });
  }

  $('#draggable li.parent, #draggable li.child').draggable({
    cancel: "a.ui-icon",
    revert: "invalid",
    helper: "clone",
    cursor: "move",
  });


  $('#droppable').droppable({
    tolerance: 'pointer',
    accept: "#draggable li.parent",
    drop: function(event, ui) {
      console.log(ui.draggable.clone());
      var newItem = ui.draggable.clone(true).detach().addClass('ui-droppable ui-droppable-active ui-state-highlight');
      $('.list').append(newItem);
      makeParentDrop(newItem);

    }
  });

  makeParentDrop('#droppable li.parent');

});

AS the new items are not initialized as Droppable elements, you must initialize them. I have added a Function to help do that.