Reply To: Drag Flexible Content layouts between parent Repeaters

• retani

• March 14, 2017 at 4:24 am

Hi,

I realized that I had to actually change it quite a bit to fit my situation (not just copy&paste as I wrote earlier, sorry!)

This one works in the following situation:

repeater “columns” > flexible content “element” > layouts

Or in words: I have a repeater named “columns” which has one subfield of type “flexible content” named “element” which has several layouts. Each column can have several Elements of different layouts, for example Image, Text-Block, etc.

Overview of the changes
– attached “sortstop” and “sortstart” events again
– changed several selectors
– re-initialise tinymce after intercolumn drag

This is not good code, but it works for now. Would be great to have such a thing in ACF.

function my_acf_input_admin_footer() {

    ?>

        <script type="text/javascript">
        
        (function($) {

           acf.add_action('ready', function( $el ){
               
               $( ".values" ).sortable({
                 connectWith: ".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') );
                        //$(this).sortable("refresh");
                    });                    
                  },                 
               })
               
           });

            acf.add_action('sortstop', function ($el) {
                if ($($el).parents('[data-name="columns"] > .acf-input > .acf-repeater').length) {
                    var column_num = $($el).closest('.acf-row').attr('data-id');
                    $($el).find('[name^="acf[field_"]').each(function(){
                        var field_name = $(this).attr('name');   
                        var index_location = field_name.indexOf(']')+2;
                        var new_name = field_name.substr(0, index_location) + column_num + field_name.substr(index_location+1)
                        $(this).attr('name', new_name);
                    });
                    $($el).closest('[data-name="element"]').find('.acf-input > .acf-flexible-content > .values > .layout').each(function(index){
                        $(this).find('[name^="acf[field_"]').each(function(){
                            var field_name = $(this).attr('name');   
                            var index_location = GetSubstringIndex(field_name,']', 3)+2;
                            var new_name = field_name.substr(0, index_location) + index + field_name.substr(index_location+1);
                            $(this).attr('name', new_name);
                        });
                    });
                }
            });      

        })(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

}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');