Improved behavior of sortable options

diff --git a/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl b/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
index 8402b79d1944322ec5d9fc7e3c2fabbc69903f3b..cdf84f5e50ef4b001e852fa1c747b6992f3f6f9b 100644 (file)
--- a/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
+++ b/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
@@ -1,7 +1,7 @@
 {if $option->issortable}
        <script data-relocate="true">
                document.addEventListener('DOMContentLoaded', function() {
-                       require(['Dom/Traverse', 'Dom/Util', 'Ui/TabMenu'], function (DomTraverse, DomUtil, UiTabMenu) {
+                       require(['Dom/Traverse', 'Dom/Util', 'Ui/TabMenu', 'WoltLabSuite/Core/Ui/Sortable/List'], function (DomTraverse, DomUtil, UiTabMenu, UiSortableList) {
                                var sortableList = elById('{$option->optionName}SortableList');
                                var tabMenu = UiTabMenu.getTabMenu(DomUtil.identify(DomTraverse.parentByClass(sortableList, 'tabMenuContainer')));
                                var activeTab = tabMenu.getActiveTab();
@@ -10,7 +10,12 @@
                                // the sortable list to be visible
                                tabMenu.select(elData(DomTraverse.parentByClass(sortableList, 'tabMenuContent'), 'name'));
                                
-                               new WCF.Sortable.List('{$option->optionName}SortableList', null, 0, { }, true);
+                               new UiSortableList({
+                                       containerId: '{$option->optionName}SortableList',
+                                       options: {
+                                               toleranceElement: ''
+                                       }
+                               });
                                
                                // re-select the previously selected tab
                                tabMenu.select(null, activeTab);
@@ -23,7 +28,7 @@
                        {foreach from=$availableOptions item=availableOption}
                                <li class="sortableNode">
                                        <span class="sortableNodeLabel">
-                                               <label><input type="checkbox" name="values[{$option->optionName}][]" value="{$availableOption}"{if $availableOption|in_array:$value} checked{/if}> {lang}wcf.user.option.{$availableOption}{/lang}</label>
+                                               <span class="icon icon16 fa-arrows sortableNodeHandle"></span> <label><input type="checkbox" name="values[{$option->optionName}][]" value="{$availableOption}"{if $availableOption|in_array:$value} checked{/if}> {lang}wcf.user.option.{$availableOption}{/lang}</label>
                                        </span>
                                </li>
                        {/foreach}
@@ -33,4 +38,4 @@
        {foreach from=$availableOptions item=availableOption}
                <label><input type="checkbox" name="values[{$option->optionName}][]" value="{$availableOption}"{if $availableOption|in_array:$value} checked{/if}> {lang}wcf.user.option.{$availableOption}{/lang}</label>
        {/foreach}
-{/if}
\ No newline at end of file
+{/if}