Hello everyone! I figured out how to do drag and drop in the service portal recently so I thought I would share the love a little bit! I have attached some starter files that should help you follow along.
The before folder contains some source files for a widget. If you make a widget out of them you should get something like this:
It is a task board made out of HTML, CSS, and JSON I pass from the server. Unfortunately, this task board is not interactive. What we would like to do is be able to drag those task cards around as we please. The secret lies in HTML drag and drop events!
First of all, huge credit goes to this article. If you are looking for an intro to drag and drop events, I recommend starting there.
The after files contain the source files for the interactive version of this task board. I want to briefly go over the high points:
1. The lack of Angular drag and drop events
To my knowledge, the version of Angular in the service portal does not support drag and drop natively, so we have to hack that functionality in. This is done by adding a script tag to the top of the HTML template file for the widget:
<script>
//gets the angular scope from outside because
//we don't have access to it for drag events
function getScope() {
return angular.element('#drag-n-drop').scope().c;
}
</script>This script gives us a getScope() method that we can use to gain access to our Angular functions and variables. This is particularly useful for binding the native HTML drag and drop events to functions in our Angular controller.
2. Drag and Drop event handles
There are several HTML attributes that you set when doing drag and drop in HTML. Some go on the element you are going to drag, others go on the element you will drag to.
Element that gets dragged:
- draggable - sets the element as draggable
- ondragstart - function to run when we start dragging the element
- ondragend - function to run when we finish dragging the element
Element that gets dragged to:
- ondragenter - function to run when our mouse enters this element while dragging
- ondragleave - same as 1 but when we leave the element with the mouse
- ondragover - between 1 and 2
- ondrop - function to run when we let go of the element we are dragging while on this element
These are all set using the getScope().__method-name-here__() because we are tying them to their respective functions in the Angular controller.
3. Recursive function in the controller
Sometimes when we drop an element, we aren't always dropping it where we think we are. We could be dropping it several levels deep in the DOM from where we want to be. I used recursion in findColType to traverse back up the DOM tree to find out which column we are dropping in.
4. CSS pointer-events property
When dragging stuff around, I use the pointer-events: none; CSS property to prevent unwanted elements from interfering with my drag enter, leave, and over events. It is quite nice if you can manage it correctly!
Conclusion
If you load the after files into a widget you should be able to see the working finished product! I hope this guide was helpful to you. Happy dragging!
