Reply To: Drag Flexible Content layouts between parent Repeaters

• fullsteamlabs

• May 20, 2016 at 1:38 pm

Success! I had wrote a script that modifies the name attribute of elements to match the new column and element locations. It’s hooked into the sortstop action. This code should work on most any setup with only two substitutions, the [data-name=”elements”] and [data-layout=”columns”] attributes are specific to my setup. It uses a nested flexible content field structure where the columns are a layout under the primary flexible content field. Elements is another flexible content field that’s part of the column layout.

// Handle Dragging Between Columns
function GetSubstringIndex(str, substring, n) {
    var times = 0, index = null;

    while (times < n && index !== -1) {
        index = str.indexOf(substring, index+1);
        times++;
    }

    return index;
}
acf.add_action('sortstop', function ($el) {
    if ($($el).parent('[data-name="elements"] > .acf-input > .acf-flexible-content > .values').length) {
        var column_num = $($el).closest('[data-layout="column"]').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="elements"]').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);
            });
        });
    }
});