Set vdom keys for each of item's child elements.

Child elements of items can get removed/reordered, so we have to mark
each of them children with a unique key for virtual dom to be able to
reorder them correctly.

The absence of keys was causing some weird glitches where the content
would disappear while the item spinner was visible.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -4,16 +4,15 @@ function DragAndDropTemplates(configuration) {
     // Set up a mock for gettext if it isn't available in the client runtime:
     if (!window.gettext) { window.gettext = function gettext_stub(string) { return string; }; }
 
-    var itemSpinnerTemplate = function(xhr_active) {
-        if (!xhr_active) {
+    var itemSpinnerTemplate = function(item) {
+        if (!item.xhr_active) {
             return null;
         }
-        return (h(
-            "div.spinner-wrapper",
-            [
+        return (
+            h("div.spinner-wrapper", {key: item.value + '-spinner'}, [
                 h("i.fa.fa-spin.fa-spinner")
-            ]
-        ));
+            ])
+        );
     };
 
     var renderCollection = function(template, collection, ctx) {
@@ -50,7 +49,8 @@ function DragAndDropTemplates(configuration) {
         if (item.imageURL) {
             item_content_html = '<img src="' + item.imageURL + '" alt="' + item.imageDescription + '" />';
         }
-        return h('div', { innerHTML: item_content_html, className: "item-content" });
+        var key = item.value + '-content';
+        return h('div', { key: key, innerHTML: item_content_html, className: "item-content" });
     };
 
     var itemTemplate = function(item, ctx) {
@@ -113,7 +113,7 @@ function DragAndDropTemplates(configuration) {
         }
         // Define children
         var children = [
-            itemSpinnerTemplate(item.xhr_active)
+            itemSpinnerTemplate(item)
         ];
         var item_content = itemContentTemplate(item);
         if (item.is_placed) {
@@ -132,7 +132,7 @@ function DragAndDropTemplates(configuration) {
             }
             var item_description = h(
                 'div',
-                { id: item_description_id, className: 'sr' },
+                { key: item.value + '-description', id: item_description_id, className: 'sr' },
                 description_content
             );
             children.splice(1, 0, item_description);