How to use the html5sortable/dist/html5sortable.cjs function in html5sortable

To help you get started, we’ve selected a few html5sortable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github enketo / enketo-core / src / widget / rank / rank-widget.js View on Github external
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();
        }
    }
github enketo / enketo-core / src / widget / rank / rank-widget.js View on Github external
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();
        }
    }
github enketo / enketo-core / src / widget / rank / rank-widget.js View on Github external
get value() {
        const result = sortable( this.list, 'serialize' );
        return result[ 0 ].container.value;
    }
github enketo / enketo-core / src / widget / rank / rank-widget.js View on Github external
disable() {
        $( this.element )
            .prop( 'disabled', true )
            .next( '.widget' )
            .find( 'input, button' )
            .prop( 'disabled', true );

        sortable( this.list, 'disable' );
    }
github enketo / enketo-core / src / widget / rank / rank-widget.js View on Github external
enable() {
        $( this.element )
            .prop( 'disabled', false )
            .next( '.widget' )
            .find( 'input, button' )
            .prop( 'disabled', false );

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

html5sortable

VanillaJS sortable lists and grids using native HTML5 drag and drop API.

MIT
Latest version published 6 months ago

Package Health Score

76 / 100
Full package analysis