Improve drag experience.

resources/public/styles/partials/settings-bar.scss

@@ -227,6 +227,7 @@
       align-items: center;
       border-bottom: 1px solid $color-gray-darker;
       box-sizing: border-box;
+      background-color: $color-gray-dark;
       display: flex;
       padding: $small;
       width: 100%;

src/uxbox/ui/workspace/toolboxes/layers.cljs

@@ -118,6 +118,7 @@
         local (:rum/local own)
         classes (classnames
                  :selected selected?
+                 :drag-active (:dragging @local)
                  :drag-top (= :top (:over @local))
                  :drag-bottom (= :bottom (:over @local))
                  :drag-inside (= :middle (:over @local)))]
@@ -125,6 +126,7 @@
               (let [target (dom/event->target event)]
                 (dnd/set-allowed-effect! event "move")
                 (dnd/set-data! event (:id item))
+                (dnd/set-image! event target 50 10)
                 (swap! local assoc :dragging true)))
             (on-drag-end [event]
               (swap! local assoc :dragging false :over nil))
@@ -147,17 +149,22 @@
               (swap! local assoc :over false))]
       (html
        [:li {:key (str (:id item))
-             :on-click select
-             :on-drag-start on-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over on-drag-over
-             :on-drag-end on-drag-end
-             :on-drop on-drop
-             :draggable true
              :class (when selected? "selected")}
         [:div.element-list-body
-         {:class classes}
+         {:class classes
+          :style {:background-color "gray"
+                  :opacity (if (:dragging @local)
+                             "0.5"
+                             "1")}
+          :on-click select
+          :on-drag-start on-drag-start
+          :on-drag-enter on-drag-enter
+          :on-drag-leave on-drag-leave
+          :on-drag-over on-drag-over
+          :on-drag-end on-drag-end
+          :on-drop on-drop
+          :draggable true}
+
          [:div.element-actions
           [:div.toggle-element
            {:class (when-not (:hidden item) "selected")

src/uxbox/util/dom/dnd.cljs

@@ -25,6 +25,14 @@
    (let [dt (.-dataTransfer e)]
      (.setData dt (str key) (pr-str data)))))
 
+(defn set-image!
+  ([e data]
+   (set-image! e data 0 0))
+  ([e data x y]
+   (let [dt (.-dataTransfer e)
+         st (.-style data)]
+     (.setDragImage dt data x y))))
+
 (defn get-data
   ([e]
    (get-data e "uxbox/data"))