Home Forums Feature Requests Drag Flexible Content layouts between parent Repeaters Reply To: Drag Flexible Content layouts between parent Repeaters

  • 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);    
                            tinyMCE.execCommand( 'mceRemoveControl', true, $(this).attr('id') );
                            tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
                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');
                            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){
                                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);
            function GetSubstringIndex(str, substring, n) {
                var times = 0, index = null;
                while (times < n && index !== -1) {
                    index = str.indexOf(substring, index+1);
                return index;
    add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');