You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Chapters/bloc/dragAndDropExample.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
-
###Drag and Drop
1
+
## Drag and Drop
2
2
3
3
Bloc has basic support for drag-and-drop which needs to be further improved. In this chapter we try to explain the basics of drag-and-drop with Bloc events and we display some valuable examples.
4
4
5
-
####Three basic events
5
+
### Three basic events
6
6
7
7
To start understanding the Drag-and-drop process, you must acknowledge the following 3 basic events:
8
8
9
9
- BlDragStartEvent : Starts the drag process, sent when you move the cursor for the first time after having a MouseDownEvent.
10
10
- BlDragEvent : sent whenever you move the cursor during the drag process. **Needs the BlDragStartEvent to be consumed in order to be sent**.
11
11
- BlDragEndEvent : Ends the drag process, sent when you lift your cursor (i.e. send a MouseUpEvent)
12
12
13
-
####First drag and drop
13
+
### First drag and drop
14
14
15
15
Using the basic events we can write the simplest drag and drop snippet
16
16
@@ -30,9 +30,9 @@ element openInSpace
30
30
31
31
Here we add a small offset variable that is defined when starting to drag the element so that we can redefine the element's position according to the mouse position and have a smooth drag and drop.
32
32
33
-
####Custom Drag Handlers
33
+
### Custom Drag Handlers
34
34
35
-
#####DragHandler
35
+
#### DragHandler
36
36
37
37
In Bloc, there is a an implementation of an object called DragHandler. This object is a a CustomEventHandler aiming to deal with basic drag and drop without having to write again the lines above.
38
38
@@ -47,7 +47,7 @@ element openInSpace
47
47
```
48
48
However you can see the default behavior when dropping the Element is to bring the element back to its original position.
49
49
50
-
#####PullHandler
50
+
#### PullHandler
51
51
52
52
There is also the BlPullHandler which has a more detailed API allowing you more behaviours.
Other Events related to Drag and Drop are available in Bloc but they mainly concern the environment in which an Element is dragged.
119
119
@@ -296,7 +296,7 @@ One thing important in this snippet is to use the messages `requestFocus` and `l
296
296
297
297
The example is not exactly perfect nor practical but it serves as a good example on how to dynamically change the drag behaviour with keyboard events.
298
298
299
-
####Other Examples
299
+
### Other Examples
300
300
301
301
You can find more examples/experiments on Drag and Drop in the class `BlDragAndDropExamples`.
302
302
We suggest looking at the class `BlDragAndDropLetterExampleDemo` that shows an example of a letter sorter with letters reacting if hovering the 'vowel' or 'consonant' areas.
0 commit comments