≡

`, updateListValue = () => { const inputs = [ ...editableList .querySelectorAll( '.itemInput:not(.lastDropTarget > .itemInput)' ) ]; editableList.value = inputs.map( i => i.value ); editableList.dispatchEvent( new CustomEvent( 'input' ) ); // https://observablehq.com/@tmcw/exploring-viewof }, mintANewItem = () => { const newItem = templateItem.cloneNode( true ); newItem.setAttribute( 'id', randomString() ); newItem.querySelector( 'input' ).addEventListener( 'input', updateListValue ); newItem.querySelector( '.deleteButton' ).addEventListener( 'click', ( e ) => { e.preventDefault(); theList.removeChild( e.target.parentNode ); updateListValue(); } ); const grabber = newItem.querySelector( '.grabber' ); grabber.addEventListener( 'dragstart', dragStart ); grabber.addEventListener( 'dragend', dragEnd ); newItem.addEventListener( 'dragenter', dragEnter ); newItem.addEventListener( 'dragover', dragOver ); newItem.addEventListener( 'dragleave', dragLeave ); newItem.addEventListener( 'drop', drop ); return newItem; }, addANewItem = ( value = '' ) => { const newItem = mintANewItem(); newItem.querySelector( '.itemInput' ).setAttribute('value', value ); theList.insertBefore( newItem, lastDropTarget ); updateListValue(); }; // make the invisible last drop target const lastDropTarget = mintANewItem(); lastDropTarget.classList.add('lastDropTarget'); theList.appendChild( lastDropTarget ); // activate the add button addButton.addEventListener( 'click', ( e ) => { e.preventDefault(); addANewItem(); updateListValue(); } ); if (inputArray.length > 0) { for ( const itemValue of inputArray ) { addANewItem( itemValue ); } } else { // start off with one blank item addANewItem(); } updateListValue(); return editableList; }