jQuery uiでのsortable draggable droppableの使用

最近の仕事ではjQuery UIのソートとドラッグ機能を使って、一日ほど時間をかけて、大体のパラメータ構成を明らかにし、いくつかの問題に遭遇したことをまとめました.
sortable
簡単な構成は次のとおりです.

$('#subs-box').sortable({
    axis: 'y',
    cursor: 'ns-resize',
    placeholder: "ui-state-highlight", //          class    
    forcePlaceholderSize: true, //             。
    handle:'.sort-at', //               ，            
    distance: 10,
    opacity: 0.8,
    containment：'parent', //            
    // helper: 'clone', //   clone        
    items: '.subject',  //           
    stop: function (e, ui) {
        //         （          id  ）
        let newSubArr = $("#subs-box").sortable('toArray'); 
        console.log(newSubArr);
    },
}).disableSelection(); //          

いくつかのソート時のイベントや方法は、リンクされたドキュメントを参照しています.
draggable

dragInit() {
    let me = this;
    let selector = '.ptype-'+me.selectedSubType;
    
    //     
    $('#subs-box .subject').draggable({
        // appendTo: ".ptype-item.radio", //       ，               。
        // connectToSortable: "#subs-box", //   draggable       sortables 。
        
        //        clone   。      "clone",           ，            。
        //        helper: 'clone',    clone       ，           ，          。
        helper: function() {
            let helper = $(this).clone();
            helper.css({'width': $(this).width(), 'background': '#fff'}); //   clone     
            return helper;
        },
        handle: ".drag-at", //                   ，     。
        cursor: 'move',
        // containment: '.sub-box', //     draggable                    。
        revert: 'invalid', //      true，      ，        。
        revertDuration: 200,
        distance: 10,
        opacity: 0.8,
        zIndex: 10000,
        refreshPositions: true, //                      。（      drop       ）
        start(event, ui) {
            $(selector).addClass('allow'); //        ，          ，           
            //        ，   drop
            me.$nextTick(()=>{
                me.dropInit();
            });
        },
        stop(event, ui) {
            $(selector).removeClass('allow');
            //        ，  drop  。
            me.dropDestory();
        }
    }).disableSelection();

},

注意事項:
dropInit関数が初期化されるたびに、再初期化が必要な場合は、前の配置オブジェクトを破棄する必要があります.そうでなければ、1回目の初期化後、例えばある場所Aにドラッグする要素を置くことができますが、2回目の初期化後、場所Aは置くことができません.しかし、実際には、1回目の初期化dropInit関数を破棄しないと、場所Aは2回目の初期化後に置くことができます.ドラッグストップ時に前回のdropInitオブジェクトを破棄する必要があります.
dropable

dropInit() {
    let me = this;
    //     （                   ）
    // selector    ，                    。             dropInit  。
    let selector = '.ptype-'+me.selectedSubType;

    $(selector).droppable({
        // accept: selector,
        // accept: function(d) {
        //     if($(this).hasClass('ptype'+me.selectedSubType)){
        //         console.log('d>>>>>>',$(this)[0]);
        //         return true;
        //     }
        // },
        // hoverClass: "drop-hover",
        tolerance: 'pointer', //                (draggable)  "  "    （droppable）  
        drop: function( event, ui ) {
            // $(this)       
            // ui.draggable.context      
            let dragId = $(ui.draggable.context).attr('id');
            let dropId = $(this).attr('id');

            //        
            if(dropId === 'newpage') {
                me.moveAddPage(dragId);
            } else { //           
                if(dropId === me.selectedPage.id) { //         ，    

                } else {
                    let index = me.selectedPage.subs.indexOf(dragId);
                    if(index > -1) {
                        me.selectedPage.subs.splice(index, 1);

                        me.pages.forEach(page=>{
                            if(page.id === dropId) {
                                page.subs.push(dragId);
                            }
                        });

                        me.$openNotice('    ');
                        
                        //     ...
                    }
                }
            }

            $(this).removeClass('allow-hover');
        },
        over(event, ui) {
            $(this).addClass('allow-hover'); //             ，          
        },
        out() {
            $(this).removeClass('allow-hover'); //              ，            
        }
    });
},
dropDestory() {
    let selector = '.ptype-'+me.selectedSubType;
    $(selector).droppable("destroy");
},

リファレンスリンク

https://www.html.cn/jquery-ui-api/sortable/

https://www.html.cn/jquery-ui-api/draggable/

https://www.html.cn/jquery-ui-api/droppable