bibliotheca-php/webclient/view/98/managecollectionfields/managecollectionfields.html

<h3><?php echo $I18n->t('managefields.fieldsfor'); ?> <a href="index.php?p=managecolletions&m=edit&id=<?php echo $TemplateData['editData']['id']; ?>"><?php echo $TemplateData['editData']['name']; ?></a></h3>

<h4><?php echo $I18n->t('managefields.addorremove'); ?></h4>
<p><?php echo $I18n->t('managefields.addorremove.description'); ?></p>

<div id="sortableContainer">
	<div class="window">
		<div class="title-bar">
			<div class="title-bar-text">Configured fields</div>
		</div>
		<div class="window-body">
			<div id="collectionFields">
				<?php foreach($TemplateData['existingFields'] as $k=>$v) { ?>
				<div class="sortitem" data-field-id="<?php echo $k; ?>">
					<?php echo $I18n->t($v['displayname']); ?> (<?php echo $v['type'],'; ',$v['identifier']; ?>)
				</div>
				<?php } ?>
			</div>
		</div>
	</div>
	<div class="window">
		<div class="title-bar">
			<div class="title-bar-text"><?php echo $I18n->t('managefields.fieldsavailable'); ?></div>
		</div>
		<div class="window-body">
			<div id="availableFields">
				<?php foreach($TemplateData['availableFields'] as $k=>$v) { ?>
				<div class="sortitem" data-field-id="<?php echo $k; ?>">
					<?php echo $I18n->t($v['displayname']); ?> (<?php echo $v['type'],'; ',$v['identifier']; ?>)
				</div>
				<?php } ?>
			</div>
		</div>
	</div>
</div>

<form method="post" onsubmit="return saveOrderAndSubmit()">
	<input type="hidden" name="fdata[fieldSortString]" id="fieldSort"
	   value="<?php echo $TemplateData['editData']['fieldSortString'] ?? ''; ?>">
	<input type="submit" name="submitForm" value="<?php echo $I18n->t('global.save'); ?>">
</form>


<script src="view/98/ui/js/sortable.js"></script>
<script>
	new Sortable(collectionFields, {
		group: 'shared',
		animation: 150
	});

	new Sortable(availableFields, {
		group: 'shared',
		animation: 150
	});
</script>

<script type="text/javascript">
	function saveOrderAndSubmit() {
		let list = document.getElementById("collectionFields");
		let fieldSort = document.getElementById("fieldSort");
		let sortString = '';
		if(list && list.children.length > 0 && fieldSort) {
			let fields = Array.from(list.children);
			fields.forEach(function(item, index) {
				sortString += item.getAttribute("data-field-id")+",";
			});
			fieldSort.value = sortString;
			return true;
		}
		return false;
	}
</script>