0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00

Improve drag experience.

This commit is contained in:
Andrey Antukh 2016-02-03 18:07:28 +02:00
parent 4bec35869c
commit 7aa3bb01a9
3 changed files with 25 additions and 9 deletions

View file

@ -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%;

View file

@ -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")

View file

@ -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"))