Reply To: Drag Flexible Content layouts between parent Repeaters

• PeterBlickenstorfer

• June 4, 2019 at 6:04 am

Hi
Here is my version!

• Plugin: Advanced Custom Fields PRO Version 5.7.13
• Field-Structure: ‘repeater’ > ‘flexible_content’

Big Thanks To Retani

		function acfDragNDropFlexibleLayoutsBetweenRepeaters() {
?>
			<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'));
								});
							}
						});
					});

					acf.add_action('sortstop', function ($el) {

						// check if the dropped element is within a repeater field
							if($($el).parents('.acf-input > .acf-repeater').length) {

								// get column_num from closest acf-row
									var column_num = $($el).closest('.acf-row').attr('data-id');

								// loop all (input) fields within dropped element and change / fix name
									$($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);
									});

								// get closest flexible-content-field and loop all layouts within this flexible-content-field
									$($el).closest('.acf-field.acf-field-flexible-content').find('.acf-input > .acf-flexible-content > .values > .layout').each(function(index) {

										// update order number
											$(this).find('.acf-fc-layout-order:first').html(index+1);
										
										// loop all (input) fields within dropped element and change / fix name
											$(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);
											});

										// click already selected buttons to trigger conditional logics
											$(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
		}

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