Merge pull request #661 from ExpressionEngine/feature/7.x/sortablejs-for-relationship-channel-form

Added example how to use SortableJs for Relationship in Channel Form

Author: matthewjohns0n

docs/_images/sort-relationship.gif

@@ -124,14 +124,56 @@ Simple relationship fields with only 1 relationship allowed are very similar in
       {/options:my_field_name}
     </select>
 
-For relationship fields that allow multiple selections, you may also set the sort order:
-
-    {options:my_field_name}
-        Order:
-        <input type="text" name="my_field_name[sort][]" value="{option_order}" />
-        <input type="checkbox" name="my_field_name[data][]" value="{option_value}" {checked}/>
-        {option_name}<br />
-    {/options:my_field_name}
+For relationship fields that allow multiple selections, you may also set the reorderable drag-and-drop lists:
+
+    {exp:channel:entries channel="yourChannel"}
+      <ul id="list-group">
+        {relationship_field}
+            <li class="list-item">
+                <div class="list-item__handle">::</div>
+                <div class="list-item__content">
+                    <div class="list-item__title">{relationship_field:title}</div>
+                    <div class="list-item__secondary"><span> #{relationship_field:entry_id} / </span>{relationship_field:status}</div>
+                </div>
+            </li>
+        {/relationship_field}
+      </ul>
+    {/exp:channel:entries}
+
+You would need a bit of Javascript code (the example below is using SortableJs library):
+
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+    <script>
+        var el = document.getElementById('list-group');
+        var sortable = Sortable.create(el);
+    </script>
+
+Add CSS:
+
+    <style>
+        #list-group {
+            list-style-type: none;
+            padding: 0;
+            margin-left: 15px;
+        }
+        #list-group .list-item{
+            margin-bottom: 10px;
+            border: 1px solid #cecece;
+            padding: 5px 15px;
+            background: #fff;
+            display: flex;
+        }
+        #list-group .list-item__title {
+            font-weight: bold;
+        }
+        #list-group .list-item__handle {
+            cursor: move;
+            cursor: -webkit-grabbing;
+            margin-right: 10px;
+        }
+    </style>
+
+![Relationship fields](_images/sort-relationship.gif)
 
 ### Select field