Context

When I started my career, two things that I kind of shy away from are Excel and Tableau. It is a shame that how much extra effort that I have put into exploring options in Python and R by writing tens of lines of code to implement a pivot in Excel. However, on the bright side, you did become more proficient with the programming method and probably had a much deeper understanding of the underlying implementation of “pivot” because you know “reshape” could be much more powerful and predictable. The con is also very clear, now very few people can use your work. Only the coders now, and what is even worse, many coders do not read/use other people code and prefer do it themselves :). Given that, sometime you might think it is probably a good idea to put a user interface on your hardcore but beautiful applications because it is reusable, and now much accessible to a broader audience. In a series of blog posts, I am trying to build a machine learning demo that people can build a “hidden rule”, a “secret”, a “customized pattern” that we are trying to reveal by using machine learning. A key first step is how to help users easily build some rule. You can definitely ask the user to enter some rule like “if attribute_1 > 1000 then …”. However, you might be surprised at how hard it will be even to let average human being to enter that logic into computer (talk to your grandparents and give it a try). A good starting point is probably to have some drag and drop.

I am by no means a front-end developer, in this blog post, I am trying to explore some options and equip myself with some basic knowledge of the existing options out there. If I can build some drag and drop user friendly solution to build a if statement, I will declare a victory. So let’s get started.

0. Requirements

1. HTML5 Drag&Drop

W3Schools

A quick Google search says drag and drop is a built-in attribute in HTML5. Here is an example from W3schools showing how you can drag and drop an image in/out of an empty box.

There are a few key attributes related to drag and drop we need to highlight:

source

draggable=”true”: the object need to be configured in order to move it
ondragSTART=”drag(event)”: ev.dataTransfer.setData(, )

target

ondragOVER=”allowDrop(event)”: preventDefault() will now show a green plus sign indicating that you can drop now
ondrop=”drop(event)”: what do you expect to happen on the drop (mouse release). preventDefault() + ev.dataTransfer.getData() + ev.target.appendChild() will add certain content to the target object.

The example from W3Schools is very helpful, I also added a few more boxes with attributes configured to be different value so that you can understand how the objects will react accordingly. You can see my modified version here.

MDN Web Docs

At the same time, there is a much more comprehensive documentation about everything drag and drop from MDN Web Docs. They introduced the attributes above in further depth and at the same time, mentioned many other concepts like define the drag image, effect, etc.

They also included a few demos here and the one that I like the most is the parking demo, a game where you can park certain car during certain time by dragging and dropping. You can find the source code here.