BACKPACK SORTABLE SELECT2 MULTIPLE

select2_multiple.blade.php

<!-- select2 multiple -->
@php
    if (!isset($field['options'])) {
        $options = $field['model']::all();
    } else {
        $options = call_user_func($field['options'], $field['model']::query());
    }

    $multiple = isset($field['multiple']) && $field['multiple']===false ? '': 'multiple';
@endphp

<div @include('crud::inc.field_wrapper_attributes') >
    <label>{!! $field['label'] !!}</label>
    @include('crud::inc.field_translatable_icon')
    <select
        name="{{ $field['name'] }}[]"
        style="width: 100%"
        data-init-function="bpFieldInitSelect2MultipleElement"
        data-select-all="{{ var_export($field['select_all'] ?? false)}}"
        data-sortable="{{ var_export($field['sortable'] ?? false)}}"
        @include('crud::inc.field_attributes', ['default_class' =>  'form-control select2_multiple'])
        {{$multiple}}>

        @if (isset($field['model']))
            @foreach ($options as $option)
                @if( (old(square_brackets_to_dots($field["name"])) && in_array($option->getKey(), old($field["name"]))) || (is_null(old(square_brackets_to_dots($field["name"]))) && isset($field['value']) && in_array($option->getKey(), $field['value']->pluck($option->getKeyName(), $option->getKeyName())->toArray())))
                    <option value="{{ $option->getKey() }}" selected>{{ $option->{$field['attribute']} }}</option>
                @else
                    <option value="{{ $option->getKey() }}">{{ $option->{$field['attribute']} }}</option>
                @endif
            @endforeach
        @endif
    </select>

    @if(isset($field['select_all']) && $field['select_all'])
        <a class="btn btn-xs btn-default select_all" style="margin-top: 5px;"><i class="fa fa-check-square-o"></i> {{ trans('backpack::crud.select_all') }}</a>
        <a class="btn btn-xs btn-default clear" style="margin-top: 5px;"><i class="fa fa-times"></i> {{ trans('backpack::crud.clear') }}</a>
    @endif

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
</div>


{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->fieldTypeNotLoaded($field))
    @php
        $crud->markFieldTypeAsLoaded($field);
    @endphp

    {{-- FIELD CSS - will be loaded in the after_styles section --}}
    @push('crud_fields_styles')
        <!-- include select2 css-->
        <link href="{{ asset('packages/select2/dist/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    @endpush

    {{-- FIELD JS - will be loaded in the after_scripts section --}}
    @push('crud_fields_scripts')
        <!-- include select2 js-->
        <script src="{{ asset('packages/select2/dist/js/select2.full.min.js') }}"></script>
        @if (app()->getLocale() !== 'en')
        <script src="{{ asset('packages/select2/dist/js/i18n/' . app()->getLocale() . '.js') }}"></script>
        @endif
        <script>
                  (function ($) {
	$.fn.extend({
		select2_sortable: function(){
			var select = $(this);
			var ul = $(select).next(".select2-container").first("ul.select2-selection__rendered");
			ul.sortable({
				placeholder : "ui-state-highlight",
				forcePlaceholderSize: true,
				items       : "li:not(.select2-search__field)",
                tolerance   : "pointer",
                containment: 'parent',
				update 		: function() {
					$( $(ul).find(".select2-selection__choice").get().reverse() ).each(function() {

                        var title = $(this).attr('title');

                        var option = $( 'option:contains(' + title + ')', select ).first();

                        option.detach();
                        select.prepend(option);

                    });
                    select.change();
				}
			});
		}
	});

})(jQuery);
            function bpFieldInitSelect2MultipleElement(element) {


                var $select_all = element.attr('data-select-all');
                var $sortable = element.attr('data-sortable');

                if (!element.hasClass("select2-hidden-accessible"))
                    {
                        var $obj = element.select2({
                            theme: "bootstrap",
                            createTag: function(params) {
                            return undefined;
                        }
                        });

                        if($sortable) {
                            $(element).select2_sortable();
                        }
                        var options = [];
                        @if (count($options))
                            @foreach ($options as $option)
                                options.push({{ $option->getKey() }});
                            @endforeach
                        @endif

                        if($select_all) {
                            element.parent().find('.clear').on("click", function () {
                                $obj.val([]).trigger("change");
                            });
                            element.parent().find('.select_all').on("click", function () {
                                $obj.val(options).trigger("change");
                            });
                        }
                    }
            }
        </script>
    @endpush

@endif
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}