diff --git a/packages/netlify-cms-widget-relation/package.json b/packages/netlify-cms-widget-relation/package.json
index 1f6edd62..5437d08d 100644
--- a/packages/netlify-cms-widget-relation/package.json
+++ b/packages/netlify-cms-widget-relation/package.json
@@ -23,7 +23,8 @@
},
"dependencies": {
"react-select": "^4.0.0",
- "react-window": "^1.8.5"
+ "react-window": "^1.8.5",
+ "react-sortable-hoc": "^2.0.0"
},
"peerDependencies": {
"@emotion/core": "^10.0.35",
diff --git a/packages/netlify-cms-widget-relation/src/RelationControl.js b/packages/netlify-cms-widget-relation/src/RelationControl.js
index 29bd5f40..c7234214 100644
--- a/packages/netlify-cms-widget-relation/src/RelationControl.js
+++ b/packages/netlify-cms-widget-relation/src/RelationControl.js
@@ -1,12 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import { components } from 'react-select';
import AsyncSelect from 'react-select/async';
-import { find, isEmpty, last, debounce, get, uniqBy } from 'lodash';
-import { List, Map, fromJS } from 'immutable';
+import { debounce, find, get, isEmpty, last, uniqBy } from 'lodash';
+import { fromJS, List, Map } from 'immutable';
import { reactSelectStyles } from 'netlify-cms-ui-default';
import { stringTemplate, validations } from 'netlify-cms-lib-widgets';
import { FixedSizeList } from 'react-window';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+
+function arrayMove(array, from, to) {
+ const slicedArray = array.slice();
+ slicedArray.splice(to < 0 ? array.length + to : to, 0, slicedArray.splice(from, 1)[0]);
+ return slicedArray;
+}
+
+const MultiValue = SortableElement(props => {
+ // prevent the menu from being opened/closed when the user clicks on a value to begin dragging it
+ function onMouseDown(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ const innerProps = { ...props.innerProps, onMouseDown };
+ return