{"id":13561999,"url":"https://github.com/ninsuo/symfony-collection","last_synced_at":"2025-12-12T04:13:37.131Z","repository":{"id":27646577,"uuid":"31131520","full_name":"ninsuo/symfony-collection","owner":"ninsuo","description":"[NOT MAINTAINED] A jQuery plugin that manages adding, deleting and moving elements from a Symfony form collection","archived":false,"fork":false,"pushed_at":"2022-03-05T19:02:46.000Z","size":1098,"stargazers_count":444,"open_issues_count":54,"forks_count":88,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-10-29T20:55:57.244Z","etag":null,"topics":["collection","form-theme","jquery-plugin","symfony","symfony-collection"],"latest_commit_sha":null,"homepage":"https://symfony-collection.fuz.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninsuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-21T16:26:02.000Z","updated_at":"2024-08-23T23:27:46.000Z","dependencies_parsed_at":"2022-08-23T16:11:10.484Z","dependency_job_id":null,"html_url":"https://github.com/ninsuo/symfony-collection","commit_stats":null,"previous_names":["ninsuo/symfony2-collection"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsuo%2Fsymfony-collection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsuo%2Fsymfony-collection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsuo%2Fsymfony-collection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninsuo%2Fsymfony-collection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninsuo","download_url":"https://codeload.github.com/ninsuo/symfony-collection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704569,"owners_count":20982298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection","form-theme","jquery-plugin","symfony","symfony-collection"],"created_at":"2024-08-01T13:01:03.444Z","updated_at":"2025-12-12T04:13:37.100Z","avatar_url":"https://github.com/ninsuo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Server-side Integrations"],"sub_categories":["Miscellaneous Plugins"],"readme":"# symfony-collection\nA jQuery plugin that manages adding, deleting and moving elements from a Symfony collection\n\n![sample](http://ocarina.fr/medias/collection.png)\n\nThis is not really difficult to manage your collections using the `data-prototype` Symfony provides. But\nafter using several times collections, it appeared useful to me to create a jQuery plugin to do this job.\n\nThis is even more true when you need your elements to be moved up and down or added at a specific position: as the\nform will be proceeded using field names, we should swap field contents or field names instead of moving fields themselves to get the job done. That's\nnot really friendly in javascript, so this plugin also aims to deal with that.\n\n# Live demo\n\nDemo of this plugin is available live at: http://symfony-collection.fuz.org\n\nDemo source code is here: https://github.com/ninsuo/symfony-collection-demo\n\n# Installation\n\nThis plugin is a set of 2 files:\n\n- the jquery plugin itself, it should be located with your assets\n\n- a twig form theme that will ease use of it, it should be located in your views\n\n## Installation using Composer\n\nTo automate the plugin download and installation, edit composer.json and add:\n\n```json\n    \"require\": {\n        ...\n        \"ninsuo/symfony-collection\": \"dev-master\"\n    },\n    \"scripts\": {\n        \"post-install-cmd\": [\n            ...\n            \"Fuz\\\\Symfony\\\\Collection\\\\ScriptHandler::postInstall\"\n        ],\n        \"post-update-cmd\": [\n            ...\n            \"Fuz\\\\Symfony\\\\Collection\\\\ScriptHandler::postUpdate\"\n        ]\n    }\n```\nFiles will be automatically installed at:\n\n- symfony-collection form theme will be installed in `app/Resources/views`\n\n- symfony-collection jquery plugin will be installed in `web/js`.\n\nTips:\n\n- Replace `dev-master` by the current stable version.\n\n- Put script handlers before Symfony's installAssets if you wish to benefit from your assets optimizations.\n\n- Add `app/Resources/views/jquery.collection.html.twig` and `web/js/jquery.collection.js` to your `.gitignore`\n\nIf you prefer to install the plugin manually, you can use:\n\n```sh\ncomposer require ninsuo/symfony-collection\n```\n\nYou'll have to move:\n\n- `vendor/ninsuo/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`)\n\n- `vendor/ninsuo/symfony-collection/jquery.collection.html.twig` in your views (for example in `app/Resources/views`)\n\n## Installation using npm\n\n```sh\nnpm install ninsuo/symfony-collection\n```\n\nYou'll have to move:\n\n- `node_modules/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`).\n- `node_modules/symfony-collection/jquery.collection.html.twig` wherever you want in your views (for example in `app/Resources/views`)\n\n## Installation using Bower\n\n```sh\nbower install ninsuo/symfony-collection\n```\n\nYou'll have to move:\n\n- `bower_components/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`)\n- `bower_components/symfony-collection/jquery.collection.html.twig` in your views (for example in `app/Resources/views`)\n\n# Basic usage\n\n## A simple collection\n\nYour collection type should contain `prototype`, `allow_add`, `allow_remove` options (depending on which buttons\nyou require of course). And a class that will be used as a selector to run the collection plugin.\n\n```php\n-\u003eadd('myCollection', 'collection',\n   array (\n        // ...\n        'allow_add' =\u003e true,\n        'allow_remove' =\u003e true,\n        'prototype' =\u003e true,\n        'attr' =\u003e array(\n            'class' =\u003e 'my-selector',\n        ),\n))\n```\n\nThen, render your form after applying the given custom theme:\n\n```jinja\n     {% form_theme myForm 'jquery.collection.html.twig' %}\n     {{ form(myForm) }}\n```\n\nFinally, put the following code at the bottom of your page.\n\n```html\n    \u003cscript src=\"{{ asset('js/jquery.js') }}\"\u003e\u003c/script\u003e\n    \u003cscript src=\"{{ asset('js/jquery.collection.js') }}\"\u003e\u003c/script\u003e\n\n    \u003cscript type=\"text/javascript\"\u003e\n        $('.my-selector').collection();\n    \u003c/script\u003e\n```\n\n## Using a form theme\n\nMost of the time, you will need to create a [form theme](https://symfony.com/doc/current/form/form_customization.html)\nthat will help you render your collection and its children in a fancy way.\n\n- in your form type(s), overwrite the `getBlockPrefix()` method and return a good name.\n\n```php\n// Fuz/AppBundle/Form/AddressType.php\n\n\u003c?php\n\nnamespace Fuz\\AppBundle\\Form;\n\nuse Symfony\\Component\\Form\\AbstractType;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\nuse Symfony\\Component\\OptionsResolver\\OptionsResolver;\n\nclass AddressType extends AbstractType\n{\n    // ...\n\n    public function getBlockPrefix()\n    {\n        return 'AddressType';\n    }\n}\n```\n\n- in your form theme, you will just need to use the same name (`{% block AddressType_XXX %}`). Replace `XXX` by `widget`,\n`error` or `row` according to what you want to do (read the [Symfony doc](https://symfony.com/doc/current/form/form_customization.html)\nfor more details).\n\n```jinja\n{# FuzAppBundle:Advanced:addresses-theme.html.twig #}\n\n{% block AddressType_row %}\n\u003cdiv class=\"col-md-3\"\u003e\n  {{ form_label(form) }}\n  {{ form_errors(form) }}\n  {{ form_widget(form) }}\n\u003c/div\u003e\n{% endblock %}\n\n{% block AddressType_widget %}\n    {{ form_widget(form) }}\n    \u003cbr/\u003e\n    \u003cp class=\"text-center\"\u003e\n        \u003ca href=\"#\" class=\"collection-up btn btn-default\"\u003e\u0026lt;\u003c/a\u003e\n        \u003ca href=\"#\" class=\"collection-remove btn btn-default\"\u003e-\u003c/a\u003e\n        \u003ca href=\"#\" class=\"collection-add btn btn-default\"\u003e+\u003c/a\u003e\n        \u003ca href=\"#\" class=\"collection-down btn btn-default\"\u003e\u0026gt;\u003c/a\u003e\n    \u003c/p\u003e\n{% endblock %}\n```\n\nThen, use both form themes using:\n\n```jinja\n     {%\n        form_theme myForm\n            'FuzAppBundle:Advanced:addresses-theme.html.twig'\n            'jquery.collection.html.twig'\n     %}\n```\n\nThere are many examples using form themes in the Advanced menu of the [demo website](http://symfony-collection.fuz.org/),\ndon't hesitate to look at them.\n\nAlways put `jquery.collection.html.twig` form theme below the other you use, to avoid the settings getting overwritten.\n\n## Using Doctrine, and a position explicitly stored in a field\n\nA collection is no more than an array of objects, so by default, this plugin move element positions\nin this array. For example, if you have A, B and C in your collection and move B up, it will contain\nB, A, C.\n\nBut when Doctrine persists your collection, it will keep existing entities, and\nsimply update their content. For example, if you have a collection containing A, B, C\nwith ids 1, 2 and 3, you will end up with a collection containing B, A, C, but still\nids 1, 2 and 3.\n\nIn most cases, that's not a problem. But, if you have other relations attached to each of your\ncollection elements, you should never unlink id and value. You'll use a position field on your\ndatabase table, and it will manage the position.\n\nSomething like:\n\n```php\n    /**\n     * @ORM\\Column(name=\"position\", type=\"integer\")\n     */\n    private $position;\n```\n\nThis plugin supports this case; you need to create a `position` field in your form (with hidden type),\nmapped to your entity, and give it a class that will serve as a selector:\n\n```php\n        $builder-\u003eadd('position', HiddenType::class, [\n            'attr' =\u003e [\n                'class' =\u003e 'my-position',\n            ],\n        ]);\n```\n\nThen, use the `position_field_selector` option to provide it to the plugin:\n\n```js\n    $('.my-selector').collection({\n        position_field_selector: '.my-position'\n    });\n```\n\n## Several collections on the same page\n\nIf you wish to create several collections on the same page, you'll need to change the collection prefix\nin order for the plugin to trigger the right actions for the right collection.\n \nFor example:\n\n```js\n     $('.collectionA').collection({\n        'prefix': 'first-collection'\n     });\n\n     $('.collectionB').collection({\n        'prefix': 'second-collection'\n     });\n```\n\nThen if you want to edit those collections form theme, you'll need to replace\n`collection-add` by `first-collection-add` on your add buttons for example.\n\n```html\n   \u003ca href=\"#\" class=\"first-collection-add btn btn-default\"\u003e\n       \u003cspan class=\"glyphicon glyphicon-plus-sign\"\u003e\u003c/span\u003e\n   \u003c/a\u003e\n```\n\nSee [this sample](https://symfony-collection.fuz.org/symfony3/form-with-several-collections) for a working example.\n\n# Options\n\n**Customize rendered links** ([demo](http://symfony-collection.fuz.org/symfony3/options/customButtons))\n\nYou can customize displayed links by setting `up`, `down`, `add`, `remove` and `duplicate` options.\n\nDefault values are:\n\n```js\n     $('.collection').collection({\n         up: '\u003ca href=\"#\"\u003e\u0026#x25B2;\u003c/a\u003e',\n         down: '\u003ca href=\"#\"\u003e\u0026#x25BC;\u003c/a\u003e',\n         add: '\u003ca href=\"#\"\u003e[ + ]\u003c/a\u003e',\n         remove: '\u003ca href=\"#\"\u003e[ - ]\u003c/a\u003e',\n         duplicate: '\u003ca href=\"#\"\u003e[ # ]\u003c/a\u003e'\n     });\n```\n\nYou can also use the following classes:\n\n- `collection-add` for an add button\n- `collection-remove` for a remove button\n- `collection-up` for a move up button\n- `collection-down` for a move down button\n- `collection-duplicate` for a duplicate button\n\nAnd:\n\n- `collection-action` for any of the above action\n- `collection-action-disabled` same, but when a button is disabled (no \"up\" at the top, etc.)\n\nNote that `collection` prefix can be changed using the `prefix` option.\n\n**Disable links** ([demo](http://symfony-collection.fuz.org/symfony3/options/enableButtons))\n\nYou can disable some buttons by using `allow_up`, `allow_down`, `allow_add`, `allow_remove`\nand `allow_duplicate` options. By default, all buttons except `duplicate` are enabled.\n\nFor example, if you do not want your elements to be moved up and down, use:\n\n```js\n     $('.collection').collection({\n         allow_up: false,\n         allow_down: false\n     });\n```\n\nIf you are using the given form theme, `allow_add`, `allow_remove` and `allow_duplicate` are automatically\nset following your form type configuration.\n\n**Set minimum and maximum of elements in the collection** ([demo](http://symfony-collection.fuz.org/symfony3/options/numberCollectionElements))\n\nYou can set the minimum of elements allowed in the collection by using the `min` option. By default, it is disabled (set to 0).\n\n```js\n     $('.collection').collection({\n         min: 0\n     });\n```\n\nYou can set the maximum of elements allowed in the collection by using the `max` option. By default, it is set to 100.\n\n```js\n     $('.collection').collection({\n         max: 100\n     });\n```\n\nYou can initialize your collection with a minimum of elements created (even if they do not exist on the data object) ([demo](http://symfony-collection.fuz.org/symfony3/options/givenMinimumElements)).\n\n```js\n     $('.collection').collection({\n         init_with_n_elements: 3\n     });\n```\n\n**Only one add button at the bottom** ([demo](http://symfony-collection.fuz.org/symfony3/options/addButtonAtTheBottom))\n\nIf you prefer having only one `add` button at the bottom of the collection instead of one add button per collection element, use the `add_at_the_end` option:\n\n```js\n     $('.collection').collection({\n         add_at_the_end: true\n     });\n```\n\n**Customise add button location** ([demo](http://symfony-collection.fuz.org/symfony3/options/buttons-custom-location))\n\nIf you want to set a specific location for your add button (not close to each collection element, nor at the bottom of the collection),\nyou can use the `custom_add_location` option.\n\nJS:\n```js\n        $('.collectionA').collection({\n            custom_add_location: true\n        });\n```\n\nHTML:\n```html\n        \u003cbutton\n            data-collection=\"collectionA\"\n            class=\"collection-action collection-add btn btn-success\"\n        \u003eAdd element to collection\u003c/button\u003e\n```\n\n**Hide useless buttons** ([demo](http://symfony-collection.fuz.org/symfony3/options/hideMoveUpDown))\n\nBy default, `move up` button is hidden on the first item, and `move down` button on the last one. You can make them appear\nanyway by setting `hide_useless_buttons` to `false`. This can be useful if you want to beautify them using CSS, for example.\n\n```js\n     $('.collection').collection({\n         hide_useless_buttons: true\n     });\n```\n\n**Events** ([demo](http://symfony-collection.fuz.org/symfony3/options/eventCallbacks))\n\nThere are `before_*` and `after_*` options that let you put callbacks before and after adding, deleting or moving\nelements in the collection.\n\n- `before_up`, `before_down`, `before_add` and `before_remove` are called before modifying the collection.\nThe modification will be cancelled if the callback you gave returned `false`, and will proceed if it returned `true`\nor `undefined`.\n\n- `after_up`, `after_down`, `after_add` and `after_remove` are called after modifying the collection.\nThe modification will be reverted if the callback you gave returned `false`.\n\n- `before_init` and `after_init` are called when a collection is initialized. No return value is expected.\n\nCallback functions receive two arguments:\n\n- `collection` references the div that contains your whole collection (the symfony2 field)\n\n- `element` is the element in the collection that have been added (or moved/deleted)\n\n```js\n     $('.collection').collection({\n         after_add: function(collection, element) {\n            // automatic backup or whatever\n            return true;\n         }\n     });\n```\n\n**Using the plugin without form theme** ([demo](http://symfony-collection.fuz.org/symfony3/options/withoutFormTheme))\n\nThe form theme aims to reduce the number of options required when activating the plugin. This is really useful\nwhen you are dealing with collections of form collections. But you can still do it manually if you want, using the\nfollowing equivalents:\n\n```js\n    $('.my-selector').collection({\n        prototype_name: '{{ myForm.myCollection.vars.prototype.vars.name }}',\n        allow_add: false,\n        allow_remove: false,\n        name_prefix:  '{{ myForm.myCollection.vars.full_name }}'\n    });\n```\n\nNote that only `name_prefix` option is mandatory, all other ones have default values.\n\n**Fade in \u0026 Fade out support** ([demo](http://symfony-collection.fuz.org/symfony3/options/fadeInFadeOut))\n\nBy default, when adding or removing an element, `fade` animation will make element movements smoother.\nYou can still disable this option by using `fade_in` and `fade_out` options.\n\n```js\n    $('.my-selector').collection({\n        fade_in: true,\n        fade_out: true\n    });\n```\n\n**Drag \u0026 drop support** ([demo](http://symfony-collection.fuz.org/symfony3/options/dragAndDrop))\n\nIf you are using Jquery UI and have the `sortable` component available in your application, the `drag_drop` option is\nautomatically enabled and let you change your element positions using drag \u0026 drop. You can disable this behaviour by explicitly\nsetting `drag_drop` option to false.\n\nIf required, you can customize `sortable` by overloading options given to `jQuery.ui.sortable` using the `drag_drop_options` option.\n\nBy default, your collection is initialized with the following options:\n\n```js\n     $('.collection').collection({\n         drag_drop: true,\n         drag_drop_options: {\n            placeholder: 'ui-state-highlight'\n         }\n     });\n```\n\nNote that you should not overload `start` and `update` callbacks as they are used by this plugin, see\n`drag_drop_start` and `drag_drop_update` options in advanced usage below for more details.\n\n**Change the children selector**\n\nBy default, Symfony writes each element of a collection in a div below the collection itself. So\nthis plugin considers `\u003e div` as a default value to get collection elements. But, you may need\nto display each element of your collection in a table, so you can change this value.\n\n```js\n     $('.collection').collection({\n        elements_selector: '\u003e div'\n     });\n```\n\nYou may use `\u003e tr`, `thead \u003e tr` or more specifically `tr.item` or just `.item` if you set `class=\"item\"` at the top\nof your item's form theme. The goal is to reference each item in the collection whatever the markup.\n\n**Change the parent selector**\n\nTo be able to add elements to the collection, this plugin should be aware of the dom object that will contain them.\n\nBy default, your collection elements will be located just below your collection, for example:\n\n```html\n    \u003cdiv id=\"collection\"\u003e\n       \u003cdiv id=\"child_0\"\u003e(...)\u003c/div\u003e\n       \u003cdiv id=\"child_1\"\u003e(...)\u003c/div\u003e\n       \u003cdiv id=\"child_2\"\u003e(...)\u003c/div\u003e\n    \u003c/div\u003e\n```\n\nBut you may need to put elements deeper in the dom, for example when you put elements in a table:\n\n```html\n    \u003ctable id=\"collection\"\u003e\n        \u003ctbody\u003e\n            \u003ctr id=\"child_0\"\u003e(...)\u003c/tr\u003e\n            \u003ctr id=\"child_1\"\u003e(...)\u003c/tr\u003e\n            \u003ctr id=\"child_2\"\u003e(...)\u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n```\n\nIn that example, a parent selector should be `table.collection tbody`.\n\nNote that you can use `%id%` inside `elements_parent_selector`, it will be automatically replaced by the\ncollection's id. This is particularly useful when you're dealing with nested collections.\n\nExample:\n\n```js\n     $('.collection').collection({\n        // ...\n        children: [{\n            // ...\n            elements_parent_selector: '%id% tbody'\n        }]\n     });\n```\n\nDefault value:\n\n```js\n     $('.collection').collection({\n        elements_parent_selector: '%id%' // will be the collection itself\n     });\n```\n\n**Do not change field names**\n\nSymfony uses field names to order the collection, not the position of each element on the dom. \nSo by default, if you delete an element in the middle, all following elements will have their\nindex decreased of 1 (`field[3]` will become `field[2]` and so on) and if you add some elements \nin the middle, all subsequent elements will see their index increase to leave the space for the\nnew one.\n\nWith this implementation, you're sure to keep the right positions when clicking \"move up\" and \n\"move down\" for example. But in some situations, you may not want to overwrite indexes, \nmost probably to maintain Doctrine relationships.\n\nSet the `preserve_names` option to `true` to never touch field names. But be aware that this\noption will disable `allow_up`, `allow_down`, `drag_drop` options and will enforce \n`add_at_the_end` to true.\n\nDefault value:\n\n```js\n     $('.collection').collection({\n        preserve_names: false\n     });\n```\n\n**Changing the action container tag**\n\nBy default, without form theme, all actions are put inside a `\u003cdiv\u003e`. You\ncan overwrite this by setting the `action_container_tag` option, for\nexample if you want to put actions in a `\u003ctd\u003e` instead.\n\nDefault value:\n\n```js\n     $('.collection').collection({\n        action_container_tag: 'div'\n     });\n```\n\n# Advanced usage\n\n**Changing action's positions** ([demo](http://symfony-collection.fuz.org/symfony3/advanced/customFormTheme))\n\nBy default :\n- `add`, `move up`, `move down` and `remove` are located in this order below each collection's element\n- `add` button can be located at the bottom of the collection using `add_at_the_bottom` option\n\nYou can change those button's positions by creating them manually anywhere in your form theme.\n\nYou can use any custom clickable element as soon has it has one action class:\n- `collection-add` for an `add` button\n- `collection-remove` for a `remove` button\n- `collection-up` for a `move up` button\n- `collection-down` for a `move down` button\n\n*Warning*: `collection` is taken from the `prefix` option: if you change the plugin's prefix, you should change this class too.\n\nExample:\n\nIf we have a collection of text fields and want to display actions at the right side of each value instead of below,\nwe will use something like this:\n\n```jinja\n{% block MyType_label %}{% endblock %}\n{% block MyType_errors %}{% endblock %}\n\n{% block MyType_widget %}\n\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-md-8\"\u003e\n            {{ form_widget(form.value) }}\n        \u003c/div\u003e\n        \u003cdiv class=\"col-md-2\"\u003e\n            \u003ca href=\"#\" class=\"collection-up btn btn-default\"\u003eMove up\u003c/a\u003e\n            \u003ca href=\"#\" class=\"collection-down btn btn-default\"\u003eMove Down\u003c/a\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col-md-2\"\u003e\n            \u003ca href=\"#\" class=\"collection-remove btn btn-default\"\u003eRemove\u003c/a\u003e\n            \u003ca href=\"#\" class=\"collection-add btn btn-default\"\u003eAdd\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n{% endblock %}\n```\n\n*Note* : do not forget to set the `add` option when enabling the plugin, because if your collection is emptied,\nthe plugin will generate an `add` button based on the plugin's configuration.\n\n*Tip*: when `add` buttons are put inside the collection's elements, a new element is created next to the clicked\nelement instead of at the end of the collection.\n\n**Advanced drag \u0026 drop support** ([demo](http://symfony-collection.fuz.org/symfony3/options/dragAndDrop))\n\nIf you need to listen for `start` and/or `update` events from `jQuery.ui.sortable` in your collection,\nyou should not overload the `start` and `update` options in `drag_drop_options`, but use the built-in\n`drag_drop_start` and `drag_drop_update` options instead:\n\n```js\n     $('.collection').collection({\n         drag_drop_start: function (event, ui, elements, element) {\n            // ...\n         },\n         drag_drop_update: function (event, ui, elements, element) {\n            // ...\n         }\n     });\n```\n\nNotes:\n\n- `event` and `ui` come from `jQuery.ui.sortable` `start` callback.\n- `elements` contains all elements from the impacted collection\n- `element` is the moved element in the collection\n- If your callback returns false, the position change will be cancelled/reverted.\n\n**Collection of collections** ([demo](http://symfony-collection.fuz.org/symfony3/advanced/collectionOfCollections))\n\nThis plugin has the ability to manage a collection of form collections, but to avoid collisions, you should:\n\nIn your form type:\n\n- set a distinct `prototype_name` option and selector class for each of your collections\n\n```php\n    -\u003eadd('collections', 'collection',\n       array (\n            'type' =\u003e 'collection',\n            'label' =\u003e 'Add, move, remove collections',\n            'options' =\u003e array (\n                    'type' =\u003e 'text',\n                    'label' =\u003e 'Add, move, remove values',\n                    'options' =\u003e array (\n                            'label' =\u003e 'Value',\n                    ),\n                    'allow_add' =\u003e true,\n                    'allow_remove' =\u003e true,\n                    'prototype' =\u003e true,\n                    'prototype_name' =\u003e '__children_name__',\n                    'attr' =\u003e array (\n                            'class' =\u003e \"child-collection\",\n                    ),\n            ),\n            'allow_add' =\u003e true,\n            'allow_remove' =\u003e true,\n            'prototype' =\u003e true,\n            'prototype_name' =\u003e '__parent_name__',\n            'attr' =\u003e array (\n                    'class' =\u003e \"parent-collection\",\n            ),\n    ))\n```\n\nIn the plugin options:\n\n- use a distinct collection prefix, so clicking `add` button on a collection will add an item to the right collection\n\n- define children's selector in the `selector` attribute of `children` option (must select the root node of your children collections)\n\n```js\n     $('.parent-collection').collection({\n         prefix: 'parent',\n         children: [{\n             selector: '.child-collection',\n             prefix: 'child'\n             // ...\n         }]\n     });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsuo%2Fsymfony-collection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninsuo%2Fsymfony-collection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninsuo%2Fsymfony-collection/lists"}