imports/vx/client/code/ux.js
/**
     * Initialize component drag/drop. This function has been optimized to initialize
     * both drag/drop in a single call because sortable initialization is slow with large lists.
     *
     * @param {string} id HTML element ID to made draggable.
     * @param {string} dropClassName Drop class name (used with connectWith).
     * @param {string} placeholderClassName Placeholder class name.
     * @param {object} component Component that is drag source.
     * @param {boolean} draggable True to make component draggable.
     * @param {boolean} droppable True to make component droppable.
     */
Initialize component drag/drop. This function has been optimized to initialize
both drag/drop in a single call because sortable initialization is slow with large lists.

@param {string} id HTML element ID to made draggable.
@param {string} dropClassName Drop class name (used with connectWith).
@param {string} placeholderClassName Placeholder class name.
@param {object} component Component that is drag source.
@param {boolean} draggable True to make component draggable.
@param {boolean} droppable True to make component droppable.
Initialize component drag / drop . This function has been optimized to initialize both drag / drop in a single call because sortable initialization is slow with large lists . @param { string } id HTML element ID to made draggable . @param { string } dropClassName Drop class name ( used with connectWith ) . @param { string } placeholderClassName Placeholder class name . @param { object } component Component that is drag source . @param { boolean } draggable True to make component draggable . @param { boolean } droppable True to make component droppable .
makeDraggableDroppable(id, dropClassName, placeholderClassName, component, draggable, droppable) {
        if (!(draggable || droppable)) {
            return
        }
        const $list = $(`#${id}`)
        let parameters = {
            handle : ".entity-handle",
            placeholder : placeholderClassName,
            change : (event, ui) => {
                UX.initPlaceholder(ui, dropClassName)
            }
        }
        if (draggable) {
            parameters = { ...parameters, ...{
                cursor : "move",
                appendTo : document.body,
                zIndex : 2000,
                opacity : ".7",
                connectWith : `.${dropClassName}`,
                scroll : false,
                helper(event, $element) {
                    return UX.makeHelper(event, $element)
                },
                stop() {
                    $list.sortable("cancel")
                },
                hideDragged(event, ui) {
                    if (!component.props.dragClone && component.props.droppable) {
                        UX.hideSelected(event, ui, $list)
                    }
                },
            }}
        }
        if (droppable) {
            parameters = { ...parameters, ...{
                update : function(event, ui) {
                    const thisId = this.id
                    const parentId = ui.item.parent().attr("id")
                    const ignore = thisId !== parentId
                    OLog.debug(`ux.js makeDraggableDroppable update thisId=${thisId} parentId=${parentId} ignore=${ignore}`)
                    if (ignore) {
                        return
                    }
                    OLog.debug(`ux.js makeDraggableDroppable onDrop *fire* id=${component.props.id}`)
                    if (component.props.onDrop) {
                        const dropInfo = UX.makeDropInfo(event, ui, component, $list)
                        component.props.onDrop(dropInfo)
                    }
                },
                stop() {
                    UX.hideTargetItems()
                    $list.sortable("cancel")
                    Meteor.setTimeout(() => {
                        UX.showTargetItems()
                        $list.scrollTop(UXState.originalTargetState.scrollTop)
                    })
                },
                showDragged(event, ui) {
                    UX.showSelected(event, ui, $list)
                }
            }}
        }
        $list.sortable(parameters)
    }
makeDraggableDroppable ( id , dropClassName , placeholderClassName , component , draggable , droppable ) { if ( ! ( draggable || droppable ) ) { return } const $list = $ ( ` ${ id } ` ) let parameters = { handle : ".entity-handle" , placeholder : placeholderClassName , change : ( event , ui ) => { UX . initPlaceholder ( ui , dropClassName ) } } if ( draggable ) { parameters = { ... parameters , ... { cursor : "move" , appendTo : document . body , zIndex : 2000 , opacity : ".7" , connectWith : ` ${ dropClassName } ` , scroll : false , helper ( event , $element ) { return UX . makeHelper ( event , $element ) } , stop ( ) { $list . sortable ( "cancel" ) } , hideDragged ( event , ui ) { if ( ! component . props . dragClone && component . props . droppable ) { UX . hideSelected ( event , ui , $list ) } } , } } } if ( droppable ) { parameters = { ... parameters , ... { update : function ( event , ui ) { const thisId = this . id const parentId = ui . item . parent ( ) . attr ( "id" ) const ignore = thisId !== parentId OLog . debug ( ` ${ thisId } ${ parentId } ${ ignore } ` ) if ( ignore ) { return } OLog . debug ( ` ${ component . props . id } ` ) if ( component . props . onDrop ) { const dropInfo = UX . makeDropInfo ( event , ui , component , $list ) component . props . onDrop ( dropInfo ) } } , stop ( ) { UX . hideTargetItems ( ) $list . sortable ( "cancel" ) Meteor . setTimeout ( ( ) => { UX . showTargetItems ( ) $list . scrollTop ( UXState . originalTargetState . scrollTop ) } ) } , showDragged ( event , ui ) { UX . showSelected ( event , ui , $list ) } } } } $list . sortable ( parameters ) }
Initialize component drag/drop.
Initialize component drag / drop .