jquery-ui-sortablejquery-draggablejquery-droppable

jQuery Sortable how to set all children as a drop target


I found this greate plugin: https://johnny.github.io/jquery-sortable/

I would like to have possibilty to drop daggable elements into every child. I've tried to do this adding an empty <ol></ol> but it dosnt work on run. I would have to do this before I build sortable tree. But I do everything dynamically.

And according to documentation:

name: drop
default: true
description: If true, items can be droped onto this container

So I understand that it should work that way out of the box?

Please help.


Solution

  • I figure it out.

    The working solution:

    $("ol.sortable").sortable({
      // animation on drop
      onDrop: function  (item, targetContainer, _super) {
        var clonedItem = $('<li/>').css({height: 0})
        item.before(clonedItem)
        clonedItem.animate({'height': item.height()})
    
        item.animate(clonedItem.position(), function  () {
          clonedItem.detach()
          _super(item)
        })
      }
    })
    

    I think that removing this fragment:

      group: 'simple_with_animation',
      pullPlaceholder: false,
    

    from configuration helped.