Make field labels in details view draggable

These changes make it possible to drag the value of a field in the
details view by dragging its label. The value dragged is the same
as would be copied by clicking on the label.

app/scripts/views/fields/field-view.js

@@ -7,7 +7,8 @@ const FieldView = Backbone.View.extend({
 
     events: {
         'click .details__field-label': 'fieldLabelClick',
-        'click .details__field-value': 'fieldValueClick'
+        'click .details__field-value': 'fieldValueClick',
+        'dragstart .details__field-label': 'fieldLabelDrag'
     },
 
     render: function() {
@@ -90,6 +91,20 @@ const FieldView = Backbone.View.extend({
         }
     },
 
+    fieldLabelDrag: function(e) {
+        e.stopPropagation();
+        if (!this.value) {
+            return;
+        }
+        const dt = e.originalEvent.dataTransfer;
+        const txtval = this.value.isProtected ? this.value.getText() : this.value;
+        if (this.valueEl[0].tagName.toLowerCase() === 'a') {
+            dt.setData('text/uri-list', txtval);
+        }
+        dt.setData('text/plain', txtval);
+        dt.effectAllowed = 'copy';
+    },
+
     edit: function() {
         if (this.readonly || this.editing) {
             return;
@@ -98,6 +113,7 @@ const FieldView = Backbone.View.extend({
         this.startEdit();
         this.editing = true;
         this.preventCopy = true;
+        this.labelEl[0].setAttribute('draggable', 'false');
     },
 
     endEdit: function(newVal, extra) {
@@ -130,6 +146,7 @@ const FieldView = Backbone.View.extend({
         }
         this.valueEl.html(this.renderValue(this.value));
         this.$el.removeClass('details__field--edit');
+        this.labelEl[0].setAttribute('draggable', 'true');
     },
 
     triggerChange: function(arg) {

app/styles/areas/_details.scss

@@ -165,7 +165,6 @@
 
     &-label {
       @include th { color: th(muted-color); }
-      @include user-select(text);
       width: 7em;
       text-align: right;
       cursor: pointer;

app/templates/details/field.hbs

@@ -4,7 +4,7 @@
     {{~#if canEditTitle}} details__field--can-edit-title{{/if~}}
     {{~#if protect}} details__field--protect{{/if~}}
     ">
-    <div class="details__field-label">{{title}}</div>
+    <div class="details__field-label" draggable="true">{{title}}</div>
     <div class="details__field-value">
     </div>
 </div>