Sortable.js 的“拖动删除”的功能

kelvin1997
    //注解：
    // 我开发了这个外网很多人想要的“拖动删除”的功能，你可以这么用。
    //  makeDroppable(mySortableDiv, myCallbackFn);
    // 网页端经过测试，手机端请自行测试调整
    // showConfirmSwal()-里面确定视窗你可以去下载swal插件
    // 我用到$()是因为项目使用JQuery你可以自行更换就好
    // 当使用到multiDrag，selectedClass: 'highlighted-row'可以同时删除多项
    // 原创创作不易，使用请保留作者签名链接 以便交流
    // /*created by kelvin1997 https://zhuanlan.zhihu.com/p/269837905 */
    // 谢谢
export const makeDroppable=(sortable, onEnd)=>{
    /*created by kelvin1997 https://zhuanlan.zhihu.com/p/269837905 */
    if (Array.isArray(sortable)) {
        sortable.forEach(s => makeDroppable(s, onEnd));
        return;
    document.documentElement.addEventListener("dragover", e=>e.preventDefault());
    let setStartMove =e=>{
        sortable._StartMoveX = e.originalEvent.x;
        sortable._StartMoveY = e.originalEvent.y;
    let setToInsideDrop =e=>{
        sortable._isInsideDrop = true;
        //console.log(e.type);
    // Set to inside drop if dropping inside the sortable element
    sortable.el.addEventListener("start", setStartMove);
    sortable.el.addEventListener("drop", setToInsideDrop);
    // Set to inside drop if moving items across sortable lists
    Sortable.utils.on(sortable.el, "add", setToInsideDrop);
    Sortable.utils.on(sortable.el, "remove", setToInsideDrop);
    // On start, initialize to be outside drop
    Sortable.utils.on(sortable.el, "start", e=> sortable._isInsideDrop = undefined);
    // Check if is still outside drop, and if it is, do callback
    Sortable.utils.on(sortable.el, "end", e=>{
        if(e.originalEvent.type==='touchend' && e.originalEvent.changedTouches.length !== 1) {
            sortable._isInsideDrop = true; //multiple fingers touching, don't do delete
        } else {
            let x = e.originalEvent.x, y = e.originalEvent.y;
            if (e.originalEvent.type==='touchend' && e.originalEvent.changedTouches.length === 1) {
                x = e.originalEvent.changedTouches[0].clientX;
                y = e.originalEvent.changedTouches[0].clientY;
            let pnctX = Math.abs((x - sortable._StartMoveX)/$(e.item).width()); 
            let pnctY = Math.abs((y - sortable._StartMoveY)/$(e.item).height());
            let withinSortableX = pnctX < 0.8;
            let sortableYTop = $(sortable.el).offset().top - $(e.item).height()*2;//2 to confirm row is far above list 
            let sortableYBtm = $(sortable.el).offset().top + $(sortable.el).height() + $(e.item).height()*2;//2 to confirm row is far below list
            let withinSortableY = (y > sortableYTop) && (y < sortableYBtm);
            //console.log(`x%:${pnctX} y%:${pnctY} within:${withinSortableY}`);
            sortable._isInsideDrop |= (withinSortableX && withinSortableY);
        if (!sortable._isInsideDrop) {
            //not necessary but nice to clean up
            sortable._isInsideDrop = undefined;
            sortable._StartMoveX = undefined; 
            sortable._StartMoveY = undefined; 
            //-----------------------------------
            let highlighted = $(sortable.el).find('.highlighted-row');
            showConfirmSwal(()=> {
                //remove itself first,
                $(e.item).remove();
                //also remove any multiDrag items
                highlighted.remove();