Home Forums ACF PRO How to disable drag&drop ordering function on a specific Repeaters field?


How to disable drag&drop ordering function on a specific Repeaters field?

  • I’m trying to disable ordering function on a specific Repeaters field (which is nested).
    jQuery’S removeClass(‘order’) does the job, but it breaks order numbering function on a sortable handle at once.

    Is there any way to achieve this without touching ACF PRO itself?

    I’ll appreciate any kind of hint or advise.

    Thanks in advance!

  • Just for reference,
    this solution is working, but I don’t wanna modify ACF PRO.

    1. apply class ‘disable-sorting’ to a Repeaters field by a normal ACF PRO field group UI.
    2. add codes below inside of ‘_mouseenter :function( e ){}’ in ‘acf-pro-input.min.js’.

    if( $( this.$tbody.closest('.acf-field-repeater') ).hasClass('disable-sorting') ){
  • My co-worker gave me solution!
    I put these lines in my JS file, and worked without modifying ACF itself.

    $.extend( acf.fields.repeater, {
    	_mouseenter: function( e ){
    		// original codes + mine
  • Hey, great tip on disabling this. I’d like to implement it, but would you mind a little more explanation on how you added the JS file? I’m not a Java guy and want to get this into my child theme. Thanks!

  • Hi @golewis

    > how you added the JS file?

    Here is an instruction from ACF guys.

    Also U better wrap javascript above with this code below avoiding JS error.
    if (typeof acf !== 'undefined') {}

    These codes below colorize the handle + replace title attribute.

    	var target = $('.disable-sorting > .acf-input > .acf-repeater > .acf-table > tbody > .acf-row > .acf-row-handle.order');
    	target.css( {'cursor':'default', 'background-color':'#feffe5'} ).attr('title', 'Ordering disabled');
    }, 200);
  • I can’t get it to work 🙁

  • While searching for a solution I came to this topic again and this time I did fix it.

    Here’s the code that did it for me. Maybe it can help someone else as well.

    function disable_drag_drop_repeater() {
        <script type="text/javascript">
            (function($) {
                if (typeof acf !== 'undefined') {
                    $.extend( acf.fields.repeater, {
                        _mouseenter: function( e ){
                            if( $( this.$tbody.closest('.acf-field-repeater') ).hasClass('disable-sorting') ){
    add_action('acf/input/admin_footer', 'disable_drag_drop_repeater');
  • My editor (phpstorm) does give a warning.
    If I change it to return false the error goes away.
    I’m not a js expert, so can’t tell which is the best.

  • Has someone else experienced their code not working anymore ??

    This is the part which is not working anymore (for me):

    $.extend(acf.fields.repeater, {
        _mouseenter: function (e) {
            if ($(this.$tbody.closest('.acf-field-repeater')).hasClass('disable-sorting')) {
                return false;
  • The JS in ACF was completely rebuilt and given a new API. I have not been able to update some sites yet because I need to rewrite the JS in some cases. In your case acf.fields.repeater probably no longer exists, or it has been altered.

  • Thanks I will look into it….

  • I’m not very skilled in JS, so I tried several solutions, but I can’t get it to work anymore…

    If anyone knows howto, please post it. Really need this.

  • I finally have the solution (which works for me, but I think most people can use this)… and it was so easy (in hindsight).

    The only thing you need to do is remove the class order from the field.
    Since I add an extra class to the repeaters I don’t want users to move, it was fairly simple to limit it to these repeaters.

    jQuery(document).ready(function() {
        jQuery(".disable-sorting table.acf-table td.order").removeClass("order");

    If you want it done on all your repeaters, just remove the class .disable-sorting.

  • Does anyone know if my solution can cause any issues ?

    If you happen to read this, do you know @hube2 ?

  • I don’t think it will cause any issues, no.

    I have done something similar in the past to prevent the removal and adding of rows to a repeater. In my case I completely removed the elements. Removing the class should work just as well since removing the class should prevent the JS action from firing. It’s actually a good, simple solution.

  • Thanks for confirming the “no issue”…

  • Hello, I know that this thread is from 2 years ago, but for those who may be interested, I’ve found a very simple solution just using CSS:

    .acf-field-repeater .acf-table tr.acf-row .acf-row-handle {
       pointer-events: none;
  • doesn’t that just disable the hover status ??? but afaik it leaves the ‘click’ intact… (didn’t test though)

  • Hi. Did anybody find a way to do this with the new JavaScript API? For some reason I cannot find the element that is sortable. I tried all of the below methods. I tried other things too, but can’t get working

    jQuery( document ).ready( function( $ ) {
      if ( typeof acf !== 'undefined' ) {				
        const field = acf.getField('field_62fb6d4aa3dce');
        // field.sortable('disable');
        // field.$el.sortable('disable');
        // field.$el[0].sortable('disable');

    Any ideas? 🙂

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘How to disable drag&drop ordering function on a specific Repeaters field?’ is closed to new replies.