From ddfc3823e951b4692e3842ebd0a66d52135e0635 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 12 Jan 2019 23:44:03 +0100
Subject: [PATCH] Improved behavior of sortable options

---
 .../files/acp/templates/useroptionsOptionType.tpl   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl b/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
index 8402b79d19..cdf84f5e50 100644
--- 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}
-- 
2.20.1