From 10fe7b6e92b9258433558f8023229d01a59608c4 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 27 Feb 2020 19:02:15 -0800
Subject: [PATCH] Fix relation member drag-and-drop

---
 css/80_app.css                           |  6 ++---
 modules/ui/sections/raw_member_editor.js | 32 ++++++++++++------------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 016bf2eaf..98dbd4e1c 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1280,9 +1280,6 @@ a.hide-toggle {
 .section .grouped-items-area:empty {
     display: none;
 }
-.preset-list-item a.hide-toggle {
-    margin-bottom: 5px;
-}
 
 /*
     The parts of a field:
@@ -2490,7 +2487,8 @@ img.tag-reference-wiki-image {
 
 .section-raw-member-editor .member-list,
 .section-raw-membership-editor .member-list {
-    padding-top: 10px;
+    position: relative; /* required for drag-and-drop */
+    padding-top: 5px;
 }
 .section-raw-member-editor .member-list li,
 .section-raw-membership-editor .member-list li {
diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js
index bc1b17a5a..b381a0500 100644
--- a/modules/ui/sections/raw_member_editor.js
+++ b/modules/ui/sections/raw_member_editor.js
@@ -241,9 +241,22 @@ export function uiSectionRawMemberEditor(context) {
             wrapEnter.each(bindTypeahead);
         }
 
+        // update
+        items = items
+            .merge(itemsEnter)
+            .order();
+
+        items.select('input.member-role')
+            .property('value', function(d) { return d.role; })
+            .on('blur', changeRole)
+            .on('change', changeRole);
+
+        items.select('button.member-delete')
+            .on('click', deleteMember);
+
         var dragOrigin, targetIndex;
 
-        itemsEnter.call(d3_drag()
+        items.call(d3_drag()
             .on('start', function() {
                 dragOrigin = {
                     x: d3_event.x,
@@ -269,12 +282,12 @@ export function uiSectionRawMemberEditor(context) {
                         var node = d3_select(this).node();
                         if (index === index2) {
                             return 'translate(' + x + 'px, ' + y + 'px)';
-                        } else if (index2 > index && d3_event.y > node.offsetTop - node.offsetHeight) {
+                        } else if (index2 > index && d3_event.y > node.offsetTop) {
                             if (targetIndex === null || index2 > targetIndex) {
                                 targetIndex = index2;
                             }
                             return 'translateY(-100%)';
-                        } else if (index2 < index && d3_event.y < node.offsetTop) {
+                        } else if (index2 < index && d3_event.y < node.offsetTop + node.offsetHeight) {
                             if (targetIndex === null || index2 < targetIndex) {
                                 targetIndex = index2;
                             }
@@ -306,19 +319,6 @@ export function uiSectionRawMemberEditor(context) {
         );
 
 
-        // update
-        items = items
-            .merge(itemsEnter);
-
-        items.select('input.member-role')
-            .property('value', function(d) { return d.role; })
-            .on('blur', changeRole)
-            .on('change', changeRole);
-
-        items.select('button.member-delete')
-            .on('click', deleteMember);
-
-
 
         function bindTypeahead(d) {
             var row = d3_select(this);