Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                   <div class='sortable'>
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
    <div>item 9</div>
    <div>item 10</div>
    <div>item 11</div>
    <div>item 12</div>
    <div>item 13</div>
    <div>item 14</div>
    <div>item 15</div>
    <div>item 16</div>
    <div>item 17</div>
    <div>item 18</div>
    <div>item 19</div>
    <div>item 20</div>
    <div>item 21</div>
    <div>item 22</div>
    <div>item 23</div>
    <div>item 24</div>
</div>
              
            
!

CSS

              
                .sortable {
  background: #eee;
  top: 1em;
}

.sortable .handle {
   touch-action: none;
   background: #f00;
}

.sortable div {
    user-select: none;
}

.sortable > div {
    width: 100%;
    display: grid;
    grid-template-columns: auto 70px;
}

.sortable.active > div {
    transition: all 0.1s ease-out;
}

.sortable .handle {
  display: inline-block;
  font-size: 0.5em;
  margin-right: 10px;
}

body {
 font-size: 2em;
}

              
            
!

JS

              
                   // TODO try to use the scroll button to also pop up a contextual menu, do any issues arise from that?
    var scroll_container = document.querySelector('.scroll_container');

    var container = document.querySelector('.sortable');

    for(var i = 0; i < container.children.length; i ++) {
        var el = document.createElement('div');
        el.classList.add('handle');
        el.innerText = 'drag';
        container.children[i].append(el);
    }

    sorter = new drag_sort(container, 'handle', scroll_container);


/*
 * An implementation of a drag and drop sortable list using pointer events.

 * The problem can be divided into a number of distinct problems, which are
 * represented in the structure of the code:
 *
 * - Handling of pointer events
 * - Render loop
 * - State management of the floating item
 * - Calculating where the new position of the floating item is in the list after moving
 * - Handling of the list, and drawing a gap under the floating item
 * - Handling of scrolling the list when the item is close to the top or bottom of the scrollable area
 */

function drag_sort(container, handle_class, scroll_element = null) {
    if(scroll_element === null) scroll_element = window;

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Globals
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    this.enabled = true;
    var ths = this;

// As we support dragging elements within a scrollable sub element and not only the window,
// we need to store the top of the container so our position calculations will be correct
    const scroll_element_top = (scroll_element !== window) ? scroll_element.getBoundingClientRect().top : 0;

// Is the user currently dragging anything? Used to prevent multiple
// items being dragged at the same time
    var dragging = false;

// This structure stores data about the element which is currently being dragged
    var dragging_element = {
        it        : null,
        bbox      : null,
        index     : null,

    // Used to store the state of styles before dragging started so we can restore them
        z_index     : '',
        position    : '',
        transform   : '',
        style_width : '',

    // =============
        container_padding : '',
    };

// Used to transfer the cursor position from the event to the render loop
    var last_client_y;

// Request animation frame is used to sync our updates with the browser. This stores the ID of the
// last animation frame request so we can cancel it when the user drops the item they are dragging
    var raf;

// Stores a structure used to calculate element intersections, including
// which item the dragging item is hovering over, and which items are
// currently visible so we don't waste time updating off screen elements
    var intersection_structure = [];

// The per portion of the top and bottom of the scrollable area, which should
// cause the screen to scroll if the dragged item is dragged into that area
    const scroll_trigger_area_ratio = 0.3;

// Used to store the sizes of the trigger area, which may be smaller than expected
// as we compensate so that dragging an item in the scroll area does not cause the
// screen to scroll immediately. Explained in scroll handing section
    var scroll_trigger_area_top, scroll_trigger_area_bottom;

// =======================================================================================
// Section implementing pointer event handling. All event handlers are attached to
// the container, as we are using event delegation
// =======================================================================================
    container.addEventListener("pointerdown", userPressed, {
        passive: true
    });
    
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * When dragging starts, we prepare the item for dragging, and draw a
 * gap in the list at the starting location. We also attach events
 * to register when the dragged item moves, and when dragging ends
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function userPressed(event) {
        console.log('start');

        console.log(ths.enabled);

        if(!ths.enabled) return;


        var drag_handle = event.target;
        if(!drag_handle.classList.contains(handle_class)) return;

        // Find the actual dragging element from the handle
        var target_element = drag_handle;

        while (true) {
            if (target_element.parentElement === container) break;
            target_element = target_element.parentElement;
        }

        function init_dragging() {
            if(dragging) return;
            dragging = true;

            // Store the current positions of all items for intersection detection
            init_intersection_state();

            // Init the floating item
            init_floating_item(target_element, event.clientY);

            // Attach events
            container.addEventListener("pointermove", userMoved, { passive: true });
            container.addEventListener("pointerup", userReleased, { passive: true });
            container.addEventListener("pointercancel", userReleased, { passive: true });
            container.addEventListener("pointerleave", userReleased);

            begin_scroll(event.clientY);
            begin_render_loop(event.clientY);

            container.classList.add('active');
        }

        timed_start(container, event.clientX, event.clientY, 400, init_dragging);
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Store Y position for the animation loop
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function userMoved(event) {
        console.log('move');

        last_client_y = event.clientY;
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * When the item being dragged is dropped, it gets inserted back into
 * the list in the correct location, and its styles are restored
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function userReleased(event) {
        console.log('end');

        container.classList.remove('active');

        end_render_loop();

        container.removeEventListener("pointermove", userMoved);
        container.removeEventListener("pointerup", userReleased);
        container.removeEventListener("pointercancel", userReleased);
        container.removeEventListener("pointerleave", userReleased);

        restore_floating_item(event.clientY);

        dragging = false;
    }


// =======================================================================================
// Section implementing render loop for updating elements. Request animation
// frame API is used to synchronise with the browsers internal render loop. Nothing
// complex here, last_client_y is initialised before movement events happen so
// the dragged item doesn't jump suddenly when dragging starts.
// =======================================================================================
    function begin_render_loop(client_y) {
        last_client_y = client_y;
        main_render_loop();
    }
    
    // ==========
    function main_render_loop() {
        translate_floating_item(last_client_y);
        update_scroll(last_client_y);

        raf = requestAnimationFrame(main_render_loop);
    }

    // ==========
    function end_render_loop() {
        cancelAnimationFrame(raf);
    }


// =======================================================================================
// Section implementing handling and transforming floating item
// =======================================================================================

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * initialises the state of the floating item. Caches the items
 * existing styles so that they can be restored when dragging ends.
 * and sets styles to make it float over other items.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function init_floating_item(target, client_y) {
        dragging_element.it        = target;
        dragging_element.bbox      = dragging_element.it.getBoundingClientRect();
        dragging_element.offset    = dragging_element.bbox.top - client_y;
        dragging_element.index     = Array.prototype.indexOf.call(dragging_element.it.parentNode.children,
                                                                  dragging_element.it);

    // Make the dragging element float over other elements, storing the
    // original styles so they can be restored later
        dragging_element.z_index = dragging_element.it.style['z-index'];
        dragging_element.position = dragging_element.it.style['position'];
        dragging_element.transform = dragging_element.it.style['transform'];
        dragging_element.style_width = dragging_element.it.style['width'];
        dragging_element.it.style['z-index'] = 500;
        dragging_element.it.style['position'] = 'fixed';
        dragging_element.it.style['top'] = '0px';
        dragging_element.it.style['width'] = dragging_element.bbox.width + 'px';
        dragging_element.it.classList.add('currently_dragging');

    // Translate the floating item and draw a gap in the list for it
        translate_floating_item(client_y);

    // As the floating item is removed from the flow, add padding to  the
    // container so its height remains the same
        dragging_element.container_padding = container.style['padding-bottom'];
        container.style['padding-bottom'] = '' + dragging_element.bbox.height + 'px';
    }


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Apply a transform to the floating element, and draw a gap below it.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function translate_floating_item(client_y)
    {
        var current_scroll = get_scroll();

        var element_position = (client_y + dragging_element.offset);

        dragging_element.it.style.transform =
            "translate3d(0px," + element_position + "px, 0px)";

    // ======================
        draw_gap(calculate_list_index(client_y + current_scroll),
                 dragging_element.bbox.height);
    }


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Once the item has been dragged to its final location, we restore
 * it to it's original state, and update the DOM to insert the item in
 * the new location
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function restore_floating_item(last_client_y) {
        // Restore styles
        dragging_element.it.style['z-index']   = dragging_element.z_index;
        dragging_element.it.style['position']  = dragging_element.position;
        dragging_element.it.style['transform'] = dragging_element.transform;
        dragging_element.it.style['width']     = dragging_element.style_width;
        dragging_element.it.classList.remove('currently_dragging');
        clear_gap();

        // Put the previously floating item back in the DOM
        move_item_to(dragging_element,
                     calculate_list_index(last_client_y + get_scroll()));

        // Restore container padding
        container.style['padding-bottom'] = container.style['padding-bottom'];
    }


// =======================================================================================
// Section implementing intersection detection
// =======================================================================================

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * When dragging begins, after the list has been initialised, we need
 * to store the positions of the items in the list in order to calculate
 * which item the floating item is hovering over. This data cached at the
 * beginning instead of getting it every animation frame for
 * performance reasons.
 *       
 * The data is put into a data structure that is essentially a b-tree
 * with branching factor 32, however it only ever has 1 root node,
 * and the root element may contain more than 32 items, so performance
 * will degrade linearly at that point.
 *
 * In practice it's good enough as the structure can contain 1024 items
 * (32 times 32) before performance would degrade at all. This should
 * be adequate, as a drag and drop list with thousands of items would
 * be cumbersome to use anyway.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function init_intersection_state()
    {
        var current_scroll = get_scroll();

        sortable_items = [];

        var children = container.children;

        // We average the bottom of each element with the top of the previous one,
        // to end up with the mid-point of element margins, without having to read them.

        var previous_bottom = null;
        for (var i = 0; i < children.length; i++) {
            var rect = children[i].getBoundingClientRect();

            if(i == 0) {
                sortable_items.push(rect.top + current_scroll);
                previous_bottom = rect.bottom + current_scroll;
            } else if (i == children.length - 1) {
                var this_top = rect.top + current_scroll;
                var avarage_top = (previous_bottom + this_top) / 2;
                sortable_items.push(avarage_top);
                sortable_items.push(rect.bottom + current_scroll);
            } else {
                var this_top = rect.top + current_scroll;
                var avarage_top = (previous_bottom + this_top) / 2;
                sortable_items.push(avarage_top);
                previous_bottom = rect.bottom + current_scroll;
            }
        }

    // Put the data in a shallow tree for faster searching
        intersection_structure = [];

        var chunk = [];
        for(var i = 0; i < sortable_items.length; i ++) {
            chunk.push(sortable_items[i]);
            if(chunk.length == 33)
            {
                intersection_structure.push(chunk[0])
                intersection_structure.push(chunk)
                chunk = [sortable_items[i]];
            }
        }

        if(chunk.length > 1) {
            intersection_structure.push(chunk[0])
            intersection_structure.push(chunk)
        }

        intersection_structure.push(chunk[chunk.length - 1]);
    }

    this.init_intersection_state = init_intersection_state;

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Calculates a list index given a pixel Y coordinate in list space
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function calculate_list_index(y_in_list_space) {
    // If pointer is above the sortable area, this clamps it to the first item
        var list_index = 0;

    // Clamp to last item if the pointer is below the sortable area
        if (y_in_list_space >= intersection_structure[intersection_structure.length - 1]) {
            list_index = container.children.length - 1;

    // Handle coordinate when it  is within sortable area
        } else {
            for (var i = 1; i < intersection_structure . length; i += 2)
            {
                if(y_in_list_space >= intersection_structure[i - 1] &&
                   y_in_list_space < intersection_structure[i + 1])
                {
                    for(var ii = 0; ii <  intersection_structure[i].length; ii ++)
                    {
                        if (y_in_list_space >= intersection_structure[i][ii] &&
                            y_in_list_space <  intersection_structure[i][ii + 1])
                        {
                            list_index = ((i - 1) / 2 * 32) + ii;
                            break;
                        }
                    }
                }
            }
        }

        return list_index;
    }


// =======================================================================================
// Section implementing manipulation of the list
// =======================================================================================

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Draws a gap in the list representing where the floating item will
 * be inserted when the user drops it. I tried implementing this
 * using several methods of direct DOM manipulations initially,
 * redrawing the whole list every frame, swapping adjacent elements,
 * and inserting a 'gap element' at an index, but they all resulted in
 * visual jitter or were too slow.
 *
 * The most reliable approach seems to be to leave the DOM structure
 * alone. Make the dragging element float by fixed positioning
 * it, and create a gap in the list using the transform translate
 * CSS feature.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    var debug = document.createElement('div');
    document.body.appendChild(debug);

    function draw_gap(position, size)
    {
        debug.innerText = '' + position;

        // For performance, we only apply translation to the area of the list
        // which is actually in the viewport. We transform a few items after
        // the visible area to give CSS transitions chance to complete outside
        // of the viewport to reduce chance of visual artifacts showing
        var first_visible = calculate_list_index(scroll_element_top + get_scroll())
        var last_visible  = calculate_list_index(scroll_element_top + get_scrollable_area() + get_scroll());

        var last_visible_raw = last_visible;
        last_visible += 10;

        if(last_visible > container.children.length - 1) {
            last_visible = container.children.length - 1;
        }

        //debug.innerText = '' + (scroll_element_top + get_scrollable_area() + get_scroll()) + ' ' + first_visible + ' ' + last_visible_raw + ' ' + last_visible;

        // Apply the transforms to the items in the visible window.
        for(var i = first_visible; i < last_visible + 1; i ++)
        {
            var it = container.children[i];

            // The dom element that is being dragged requires special handling. It is
            // logically still in the dom, but essentially isn't due to the transforms.
            // We need to skip this element when applying transforms, and the position
            // of following items need to be treated as if they were in the previous slot
            var fix_position = (i >= dragging_element.index) ? 1 : 0;

            if(i === dragging_element.index) {
                continue;
            } else if(i < Math.floor(position + fix_position)) {
                it.style.transform = "";
            } else {
                it.style.transform = "translate3d(0px," + size + "px, 0px)";
            }
        }
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Clears any gap previously inserted by draw_gap by resetting the
 * transform property.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function clear_gap()
    {
        for(var i = 0; i < container.children.length; i ++)
        {
            var it = container.children[i];
            it.style.transform = "";
        }
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * As updating the DOM in real time was causing visual jitter, the
 * change is applied only once when the user finally drops the element
 * they were dragging.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function move_item_to(item, list_index)
    {
        // This is explained in draw_gap
        list_index = list_index + ((list_index >= item.index) ? 1 : 0);

        console.log(list_index);

        if (list_index == 0) {
            container.prepend(item.it);
        } else {
            container.children[list_index - 1].after(item.it);
        }
    }


// =======================================================================================
// Section implementing scroll handling
// =======================================================================================

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Get the height of the scrollable element in screen space
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function get_scrollable_area() {

        if(scroll_element === window) {
            return document.documentElement.clientHeight;
        } else {
            return scroll_element.getBoundingClientRect().height;
        }
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Get the current scroll position of the scrollable element
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function get_scroll() {
        if(scroll_element === window) {
            return scroll_element.scrollY;
        } else {
            return scroll_element.scrollTop;
        }
    }


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * When the user moves an item to the edge of the scrollable area, we
 * want to scroll  the area up or down to allow them to put the
 * element in the desired location. This area is called the scroll
 * trigger area.
 *
 * However, if the user picks up an element that is already in the
 * scroll trigger area, we don't want the list to suddenly start
 *  scrolling, as this is annoying. Thus, we reduce the scroll trigger
 * area to the distance between the current cursor position, and
 * edge of the scroll area.
 *
 * Moving the cursor towards the edge of the scrollable area causes
 * the list to scroll, and moving it away expands the scroll trigger
 * area up to a maximum value.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function begin_scroll(cursor_y) {
        var relative_cursor_y = cursor_y - scroll_element_top;

        height = get_scrollable_area();
        var max_scroll_trigger_area = height * scroll_trigger_area_ratio;

        scroll_trigger_area_top    = max_scroll_trigger_area;
        scroll_trigger_area_bottom = max_scroll_trigger_area;

        if(relative_cursor_y < max_scroll_trigger_area) {
            scroll_trigger_area_top = relative_cursor_y;
        }

        if (relative_cursor_y > height - max_scroll_trigger_area) {
            scroll_trigger_area_bottom = height - relative_cursor_y;
        }
    }


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Scroll the scrollable element When the pointer is near the top
 * or bottom edge
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function update_scroll(cursor_y) {
        var relative_cursor_y = cursor_y - scroll_element_top;

        var height = get_scrollable_area();
        var max_scroll_trigger_area = height * scroll_trigger_area_ratio;

    // If cursor moves away from the edge, increase scroll trigger area if needed
        var new_trigger_area_top    = relative_cursor_y;
        var new_trigger_area_bottom = height - relative_cursor_y;

        if(new_trigger_area_top <= max_scroll_trigger_area && new_trigger_area_top > scroll_trigger_area_top) {
            scroll_trigger_area_top = new_trigger_area_top;
        }

        if(new_trigger_area_bottom <= max_scroll_trigger_area && new_trigger_area_bottom > scroll_trigger_area_bottom) {
            scroll_trigger_area_bottom = new_trigger_area_bottom;
        }
    
    // Restore position if cursor moves up
        if(relative_cursor_y < scroll_trigger_area_top)  {
            should_scroll_by = (relative_cursor_y - scroll_trigger_area_top) * 0.07;
        } else if (relative_cursor_y > height - scroll_trigger_area_bottom) {
            should_scroll_by = (relative_cursor_y - (height - scroll_trigger_area_bottom)) * 0.07;
        } else {
            should_scroll_by = 0;
        }

        scroll_element.scrollBy(0, should_scroll_by);
    }


// =======================================================================================
// Utility functions
// =======================================================================================

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Require the user to hold the drag handle for a given period before
 * dragging begins, used to prevent unintended reordering of content.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    function timed_start(event_target, start_x, start_y, delay, continue_callback)
    {
        console.log(delay);

    // Require the user to hold the scroll trigger for some time before it will move
        var cancel_action = false;

        function set_cancel() {
            cancel_action = true;
        }

        event_target.addEventListener("pointerup", set_cancel);
        event_target.addEventListener("pointercancel", set_cancel);
        event_target.addEventListener("pointerleave", set_cancel);

        var end_x = start_x;
        var end_y = start_y;

        function update_movement(e) {
            end_x = e.clientX;
            end_y = e.clientY;
        }

        event_target.addEventListener("pointermove", update_movement);

    // Require the user to hold the scroll trigger for some time before it will move
        setTimeout(function() {
            event_target.removeEventListener("pointerup", set_cancel);
            event_target.removeEventListener("pointercancel", set_cancel);
            event_target.removeEventListener("pointerleave", set_cancel);
            event_target.removeEventListener("pointermove", update_movement);

            if(!cancel_action && (Math.abs(start_x - end_x) < 5 && Math.abs(start_y - end_y) < 5 )) {
                console.log('here');

                continue_callback();
            }
        }, delay);
    }
}
              
            
!
999px

Console