How to use html5sortable - 9 common examples

this.$nextTick(() => {
        sortable('.el-upload-list--picture-card', {
          items: '.el-upload-list__item',
          forcePlaceholderSize: true,
          placeholderClass: 'my-sortable-placeholder'
        });
        sortable('.el-upload-list--picture-card')[0].addEventListener('sortupdate', (e) => {
          // 调整图片顺序后，更新图片列表数组
          console.log(`e.detail.index: ${e.detail.index}`);
          console.log(`e.detail.oldindex: ${e.detail.oldindex}`);
        });
      });
    },

update() {
        const value = this.element.value;
        // re-initalize sortable because the options may have changed
        sortable( this.list );

        if ( value ) {
            this.value = value;
            this.originalInputValue = value;
        } else {
            this._reset();
        }
    }

that.originalInputValue = that.value;
                    that.element.dispatchEvent( events.FakeFocus() );
                }
            } );

        this.list.querySelector( '.btn-reset' ).addEventListener( 'click', ( evt ) => {
            this._reset();
            evt.stopPropagation();
        } );

        this.element.classList.add( 'hide' );

        this.value = loadedValue;

        // Create the sortable drag-and-drop functionality
        sortable( this.list, {
            items: this.itemSelector,
            //hoverClass: 'rank-widget__item--hover',
            containerSerializer( container ) {
                return {
                    value: [].slice.call( container.node.querySelectorAll( `${that.itemSelector} input` ) ).map( input => input.value ).join( ' ' )
                };
            }
        } )[ 0 ].addEventListener( 'sortupdate', () => {
            this.originalInputValue = this.value;
            this.element.dispatchEvent( events.FakeFocus() );
        } );

        if ( this.props.readonly ) {
            this.disable();
        }
    }

get value() {
        const result = sortable( this.list, 'serialize' );
        return result[ 0 ].container.value;
    }

disable() {
        $( this.element )
            .prop( 'disabled', true )
            .next( '.widget' )
            .find( 'input, button' )
            .prop( 'disabled', true );

        sortable( this.list, 'disable' );
    }

enable() {
        $( this.element )
            .prop( 'disabled', false )
            .next( '.widget' )
            .find( 'input, button' )
            .prop( 'disabled', false );

        sortable( this.list, 'enable' );
    }

this.$nextTick(() => {
		            sortable('.el-upload-list--picture-card', {
			            items: '.el-upload-list__item',
			            forcePlaceholderSize: true,
			            placeholderClass: 'my-sortable-placeholder'
		            });
		        });
	        }

this.$nextTick(() => {
          sortable('.el-upload-list--picture-card', {
            items: '.el-upload-list__item',
            forcePlaceholderSize: true,
            placeholderClass: 'my-sortable-placeholder'
          });
        });
      }

constructor(sortListSelector, options) {
    if ($(sortListSelector).length > 0) {
      sortable(sortListSelector, options)[0].addEventListener("sortupdate", (event) => {
        const $children = $(event.target).children();

        if (options.onSortUpdate) {
          options.onSortUpdate($children);
        }
      });
    }
  }
}