Drag Flexible Content layouts between parent Repeaters

• vincentbosch7

• July 20, 2021 at 9:57 am

Just bringing this topic up again.

I’ve been using the last solution posted here for a while now, it’s great but it just isn’t perfect yet. Sometimes when duplicating and dragging a field to another repeater row it just deletes it after publishing (and I’m experiencing some other small bugs).

My only question right now is: Is it still planned to implement this in ACF Pro? I’ve been reading this question a multiple times now and I think it would be a great feature if implemented in ACF Pro.

• John Huebner

• July 20, 2021 at 10:39 am

You would need to contact the developer to get an answer to that question.

• UsmanShahzad

• November 20, 2023 at 10:45 pm

Ok i have updated the code and now it works but somehow you need to have atleast one layout in flexible content for dragging to work.

add_action('acf/input/admin_footer', function () {
    ?>
    <script type="text/javascript">

        (function($) {

            acf.add_action('ready', function($el){
                $(".acf-flexible-content .values").sortable({
                    connectWith: ".acf-flexible-content .values",
                    start: function(event, ui) {
                        acf.do_action('sortstart', ui.item, ui.placeholder);
                    },
                    stop: function(event, ui) {
                        acf.do_action('sortstop', ui.item, ui.placeholder);
                        $(this).find('.mce-tinymce').each(function() {
                            tinyMCE.execCommand('mceRemoveControl', true, $(this).attr('id'));
                            tinyMCE.execCommand('mceAddControl', true, $(this).attr('id'));
                        });
                    }
                });

                $(".acf-repeater .acf-flexible-content").sortable({
                    connectWith: ".acf-repeater .acf-flexible-content",
                    start: function(event, ui) {
                        acf.do_action('sortstart', ui.item, ui.placeholder);
                    },
                    stop: function(event, ui) {
                        acf.do_action('sortstop', ui.item, ui.placeholder);
                    }
                });
            });

            acf.add_action('sortstop', function ($el) {
                var $repeater = $($el).closest('.acf-input > .acf-repeater');
                
                if ($repeater.length) {
                    var $row = $el.closest('.acf-row');
                    var column_num = $row.attr('data-id');

                    // Loop through fields within the dropped element and update names
                    $el.find('[name^="acf[field_"]').each(function() {
                        var field_name = $(this).attr('name');
                        field_name = field_name.match(/\[([a-zA-Z0-9_-]+)\]/g);
                        field_name[1] = '[' + column_num + ']';
                        var new_name = 'acf' + field_name.join('');
                        $(this).attr('name', new_name);
                    });

                    // Loop through layouts within the flexible content field
                    $repeater.find('.acf-flexible-content .values > .layout').each(function(index) {
                        $(this).find('.acf-fc-layout-order:first').html(index + 1);

                        // Loop through fields within each layout and update names
                        $(this).find('[name^="acf[field_"]').each(function() {
                            var field_name = $(this).attr('name');
                            field_name = field_name.match(/\[([a-zA-Z0-9_-]+)\]/g);
                            var tempIndex = parseInt(field_name[3].match(/([0-9]+)/g));
                            field_name[3] = field_name[3].replace(tempIndex, index);
                            var new_name = 'acf' + field_name.join('');
                            $(this).attr('name', new_name);
                        });

                        // Trigger click on selected buttons to activate conditional logic
                        $(this).find('.acf-button-group label.selected').trigger('click');
                    });
                }
            });

        })(jQuery);

        function GetSubstringIndex(str, substring, n) {
            var times = 0, index = null;
            while (times < n && index !== -1) {
                index = str.indexOf(substring, index + 1);
                times++;
            }
            return index;
        }

    </script>
    <?php
});