Drag&Drop API is one of many great things that new HTML5 specs offers.
In this post I have provided you with an example of how you might use that API to create a very basic portal.
About the demo
To see the demo mentioned above, visit this page.
The file dealing with DnD API is called urldnd.js. This file contains a definition of a Portal (URLDnD) class, which attaches Drag&Drop features to registered portal portlets.
Portlets are draggable and may be dropped within each of the portal columns. Portal columns are the containers for protal’s portlets and to be registered as a drop zones I had to add event listeners to certain DnD events. One of the most important handlers is registered in this line:
column.addEventListener('drop', dnd.handleDrop, false);
This is how you make a column react on each portal drop event. So whenever portal is dragged over a column, and dropped inside of it dnd.handleDrop function is executed and it contains the logic of removing the portal from the previous container (column) and appending it to the new targeted container (column).
The moment we start dragging the portlet, the dragstart event would be triggered so in order to catch that event and attach the minimal amount of data to it I am registering the handler to that event in the following line of code:
portlet.addEventListener('dragstart', dnd.handleDragStart, false);
e.dataTransfer.setData('text/plain', this.id);The reason for doing that is simple – so that at the end, when the portlet gets dropped I could grab the portlet that was dragged and manipulate it accordingly. The above line shows how you might attach some extra information to the event itself.
Links
- Demo.
- Demo application source code.
uroslates 