Yellow Flag

This website version is not maintained anymore

Up to date documentation is available in Symfony 3.x website (see the dropdown menu above).

JavaScript options : drag & drop

If jquery.ui.sortable is available within your application, your form collections will be automatically sortable using drag & drop. Do not hesitate to test this feature on all other forms in this demo website, even on collection of form collections.

As this feature is enabled by default, set drag_drop option to false to disable it (see demo 1 below).

You can play with up and down options to hide them (see demo 2 below).

You can add custom jquery.ui.sortable options by setting them in drag_drop_options option (see demo 3 below). But as start and update sortable options are already used by this plugin, you should use drag_drop_start and drag_drop_update callbacks instead if needed (see demo 4 below).

Drag & drop do not work if allow_move_up or allow_move_down are disabled.


This demostration is made of the following files (click to see on GitHub in a new tab):
    -     Controller/OptionsController.php
    -     Resources/views/Options/dragAndDrop.html.twig

Demo 1: drag & drop disabled

You can't move those form fields using drag & drop.

Add, move, remove values and press Submit.

Value :a

Value :b

Value :c


Code used:

    <script type="text/javascript">

        $('.disabled-collection').collection({
            drag_drop: false
        });

    </script>

Demo 2: hidden move up/down buttons

Just create any invisible container with collection-up and collection-down in your form theme or explicitely display:none those css classes.

Add, move, remove values and press Submit.

Value :a

Value :b

Value :c


Code used:

    <style>
        .nobuttons-collection .collection-up, .nobuttons-collection .collection-down {
            display:none;
        }
    </style>

    <script type="text/javascript">

        $('.nobuttons-collection').collection({
            up: '<div style="display:none;"></div>',
            down: '<div style="display:none;"></div>'
        });

    </script>

Demo 3: customize sortable options

You can give any standard options to jquery.ui.sortable by passing it to the drag_drop_options option.

Add, move, remove values and press Submit.

Value :a

Value :b

Value :c


Code used:

    <script type="text/javascript">

        $('.moreoptions-collection').collection({
            drag_drop_options: {
                revert: true
            }
        });

    </script>

Demo 4: use start/update sortable options

As this plugin uses the start and update sortable callbacks, you should use drag_drop_start and drag_drop_update options instead.

Please drag & drop...
Add, move, remove values and press Submit.

Value :a

Value :b

Value :c


Code used:

    <script type="text/javascript">

        var isDragging = false;
        $('.startupdate-collection').collection({
            drag_drop_options: {
                stop: function (ui, event, elements, element) {
                    if (isDragging) {
                        $('#demo').html('<div class="alert alert-warning">Position unchanged!</div>');
                        isDragging = false;
                    }
                }
            },
            drag_drop_start: function (ui, event, elements, element) {
                $('#demo').html('<div class="alert alert-danger">Dragging....</div>');
                isDragging = true;
            },
            drag_drop_update: function (ui, event, elements, element) {
                $('#demo').html('<div class="alert alert-success">Position updated!</div>');
                isDragging = false;
            }
        });

    </script>