SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.69k stars 3.7k forks source link

[bug] 1.13.0 has bug,if dragable container within continer when drag,it will lost in some times #1983

Open joebnb opened 3 years ago

joebnb commented 3 years ago

if dragable container within continer when drag,it will sort unexpectable lost draging element in some times

1.10.2 works fine

ok

1.13.0

bug

reproduction:

  1. put a sortable main container on root sortable container
  2. put 3 sub sortable container in sortable main container,use Array.slice()(beacuse it was a carousel) to just show one of sub sortable container
  3. drag sortable main container sort with sibling elements,it will lost or flashing
owen-m1 commented 3 years ago

Please create a JSBin reproducing this so I can debug it

joebnb commented 3 years ago

this case hard to reproducing cause lot of works,

Please create a JSBin reproducing this so I can debug it

i'm afraid can't put it on jsbin beacause it contain a heavy code.but i was found different behavior between 1.10.2 and 1.13.0.

when i regist a sortable group Root and regist sortable group A in Root, when add sub group in A , if i drag sub-A to Root ,the 1.13.0 seems create a new event/element and replace old event.

this action like "Nested Sortables Example " in http://sortablejs.github.io/,but all action will transfrom to a data strcture like this:

{
    node: 'root',
    child: [
        {
            name: 'A',
            child: [
                { name: 'sub-A' }
            ]
        }
    ]
}

and listen sortablejs event to modify data structe,and re-render all view.

registInnerDrag(parentInstanceKey, dragParentElement) {
    // parentInstanceKey expect Root 
    const sortableOption = {
        animation: 200,
        group: {
            name: 'A',
            pull: true,
            put: true,
        },
        onStart: (e) => {

        },
        onAdd: (e) => {
            // parentInstanceKey will log A in 1.13.0,in 1.10.2 log Root
            console.log(parentInstanceKey)
        },
        onUpdate: (e) => {

        },
        onRemove: (e) => {

        },
        onEnd: (e) => {

        },
    };
    Sortable.create(dragParentElement, sortableOption);

}

1.13.0: 1 13 0

1.10.2: 1 10 2

wish this info could helps to find the problem