This website version is not maintained anymore
Up to date documentation is available in Symfony 3.x website (see the dropdown menu above).
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.
You can't move those form fields using drag & drop.
Value :a
Value :b
Value :c
Code used:
<script type="text/javascript"> $('.disabled-collection').collection({ drag_drop: false }); </script>
Just create any invisible container with collection-up
and collection-down
in
your form theme or explicitely display:none those css classes.
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>
You can give any standard options to jquery.ui.sortable
by passing it to
the drag_drop_options
option.
Value :a
Value :b
Value :c
Code used:
<script type="text/javascript"> $('.moreoptions-collection').collection({ drag_drop_options: { revert: true } }); </script>
As this plugin uses the start
and update
sortable callbacks,
you should use drag_drop_start
and drag_drop_update
options
instead.
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>