Facet drag improvements

src/app/pages/ComparisonPage.jsx

@@ -219,9 +219,10 @@ export default class ComparisonPage extends Page {
    * @param  {Event} e Drag Event
    */
   _facetDrag(e) {
+    this.nodeAfter = false;
     this.dragged = e.currentTarget;
     let placeholder = this.placeholder = document.createElement('li');
-    placeholder.style.width = this.dragged.offsetWidth + 'px';
+    placeholder.style.width = Math.round(this.dragged.offsetWidth) + 'px';
     placeholder.className = 'facet-placeholder';
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', e.currentTarget);
@@ -258,8 +259,7 @@ export default class ComparisonPage extends Page {
 
     if(e.target.className == 'facet-placeholder') {
       return;
-    }
-
+    } else if (e.target != e.currentTarget) {
       this.over = e.target;
       this.dragged.style.display = 'none';
       let relX = e.clientX - this.over.getBoundingClientRect().left;
@@ -267,7 +267,7 @@ export default class ComparisonPage extends Page {
       let parent = e.target.parentNode;
 
       if (parent == e.currentTarget) {
-      if(relX > width) {
+        if(relX > width && this.dragged != e.target) {
           this.nodeAfter = true;
           parent.insertBefore(this.placeholder, e.target.nextElementSibling);
         } else {
@@ -276,6 +276,7 @@ export default class ComparisonPage extends Page {
         }
       }
     }
+  }
   /**
    * Handle name change and update state
    * @param  {SyntheticEvent} e Event

src/less/comparison.less

@@ -69,7 +69,6 @@
 
 .facet-placeholder {
   display: inline-block;
-  padding: 0.5em 0.5em;
   background-color: @primary-bg;
 }