js implementation drag and drop sorting details

1. Preface

Drag and drop sorting should be familiar to friends. When you work, you may choose to use similarSuch an open source library is used to realize the requirements. But after completing the requirements, have you ever thought about how drag-and-drop sorting is implemented? I took some time to study it and share it with you today.

2. Realize

 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px -15px 0;
    touch-action: none;
    user-select: none;
}

.grid-item {
    width: 90px;
    height: 90px;
    line-height: 88px;
    text-align: center;
    margin: 0 15px 15px 0;
    background: #FFF;
    border: 1px solid #d6d6d6;
    list-style: none;
}

.active {
    background: #c8ebfb;
}

.clone-grid-item {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 90px;
    height: 90px;
    line-height: 88px;
    text-align: center;
    background: #FFF;
    border: 1px solid #d6d6d6;
    opacity: 0.8;
    list-style: none;
}

<ul class="grid">
    <li class="grid-item">item1</li>
    <li class="grid-item">item2</li>
    <li class="grid-item">item3</li>
    <li class="grid-item">item4</li>
    <li class="grid-item">item5</li>
    <li class="grid-item">item6</li>
    <li class="grid-item">item7</li>
    <li class="grid-item">item8</li>
    <li class="grid-item">item9</li>
    <li class="grid-item">item10</li>
</ul>

Use ES6 Class writing:

class Draggable {
    constructor(options) {
         = ; // Parent element         = ; //Clone element class name         = false;
         = { x: 0, y: 0 }; // The difference relative to the last move         = { element: null, index: 0, lastIndex: 0 }; // Drag and drop elements         = { element: null, index: 0, lastIndex: 0 }; // Release elements         = { element: null, x: 0, y: 0 };
         = { x: 0, y: 0 };
         = []; // Used to save the data obtained by the drag item getBoundingClientRect() method        ();
    }
    init() {
        ();
        ();
    }
    // Get element position information    getRect() {
         = 0;
        for (const item of ) {
            (());
        }
    }
    handlePointerdown(e) {
        // If it is a mouse click, only the left button will be responded to        if ( === 'mouse' &amp;&amp;  !== 0) {
            return;
        }
        if ( === ) {
            return;
        }
         = true;
        ();
         = ;
         = ;
         = ;
        ('active');
         = (true);
         = ;
         = 'none';
        const i = [].(, );
         = [i].left;
         = [i].top;
         = i;
         = i;
         = 'translate3d(' +  + 'px, ' +  + 'px, 0)';
        ();
    }
    handlePointermove(e) {
        if () {
             =  - ;
             =  - ;
             = ;
             = ;
             += ;
             += ;
             = 'translate3d(' +  + 'px, ' +  + 'px, 0)';
            for (let i = 0; i &lt; ; i++) {
                // Collision detection                if ( &gt; [i].left &amp;&amp;  &lt; [i].right &amp;&amp;
                     &gt; [i].top &amp;&amp;  &lt; [i].bottom) {
                     = [i];
                     = i;
                    if ( !== ) {
                        if ( &lt; i) {
                            (, );
                             = i - 1;
                        } else {
                            (, );
                             = i + 1;
                        }
                         = i;
                        const dragRect = [];
                        const lastDragRect = [];
                        const dropRect = [];
                        const lastDropRect = [];
                         = i;
                         = 'none';
                         = 'none';
                         = 'translate3d(' + ( - ) + 'px, ' + ( - ) + 'px, 0)';
                         = 'translate3d(' + ( - ) + 'px, ' + ( - ) + 'px, 0)';
                        ; // Trigger redraw                         = 'transform 150ms';
                         = 'transform 150ms';
                         = 'translate3d(0px, 0px, 0px)';
                         = 'translate3d(0px, 0px, 0px)';
                    }
                    break;
                }
            }
        }
    }
    handlePointerup(e) {
        if () {
             = false;
            ('active');
            ();
        }
    }
    handlePointercancel(e) {
        if () {
             = false;
            ('active');
            ();
        }
    }
    bindEventListener() {
         = (this);
         = (this);
         = (this);
         = (this);
         = (this);
        ('pointerdown', );
        ('pointermove', );
        ('pointerup', );
        ('pointercancel', );
        ('scroll', );
        ('resize', );
        ('orientationchange', );
    }
    unbindEventListener() {
        ('pointerdown', );
        ('pointermove', );
        ('pointerup', );
        ('pointercancel', );
        ('scroll', );
        ('resize', );
        ('orientationchange', );
    }
}
// Instantiationnew Draggable({
    element: ('.grid'),
    cloneElementClassName: 'clone-grid-item'
});

Demo：/html/dragga…

3. Why not use HTML drag and drop API to implement it?

Because of the originalHTMLDrag and dropAPIIt is not available on mobile, so for compatibilityPCand mobile terminal, usedPointerEventEvents implement drag and drop logic.

4. Summary

The basic functions of drag and drop sorting have been implemented, but there are still many shortcomings. Functions such as nested drag, cross-list drag, and automatic scrolling to the bottom are not implemented.

This is the end of this article about the details of js implementing drag and drop sorting. For more related js implementing drag and drop sorting content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!