Human’s are natural pioneers. Don’t be afraid to roll your own

Dean Watts
Aug 7, 2016 · 6 min read

So in an effort to become more organized I have begun work on a cross platform “to-do/calendar” web application. The end goal is to have a functional, fast, and easy to use app that is inspired by the impeccably designed Clear app for iOS:

Unfortunately, as an Android user I cannot use this app…but as a Software Engineer I can certainly make my own!

So two days ago I got to work, and messed around with jQuery libraries and web components to try and get the list functionality I was looking for.

Unfortunately, that proved difficult. Both jQueryUI’s and Rubaxa’s Sortable libraries, while excellent in their own right, did not fit what I was looking for. In fact, in my research I found that no drag-n-drop list sorting library or component could handle both the sorting AND the slide-to-perform-action functionality I needed.

That meant no shortcuts, time to roll my own path.

Awesome, lets go pioneering!

Horizontal

As mentioned before, I needed to have a <li> element respond to user input, and have different responses and functions based on if it is horizontal or vertical movement. This meant I needed 3 events, mousedown, mouseup, and mousemove.

When the mouse is down, I need to set a flag that the mouse is down, and record the coordinates of the mouse and the <li> element.

Now I need to handle movement when the mouse is down. I did this by first checking if the mouseDown variable is true, then taking the difference between the x and the y coordinates and seeing if it is greater than a SLIDE_THRESHOLD constant I set at the top of my .js file. I have the constant set to 1/60th of the screens width, which provides a nice balance. Once I that threshold is passed either vertically or horizontally, I set the respective flag and all future movement will be passed to either handleHorizontal() or handleVertical() functions until the mouse button is released.

Currently, the handleHorizontal() function doesn’t do much, it only slides with the mouse cursor, I plan on adding delete/complete actions in the future.

Lastly, is the mouse released functionality. Here I add a nice animation to return the element to its starting point, and reset all my flags.

Vertical

Now for the hard part. There’s a reason people use JS Sortable libraries…but fortunately this is a relatively primitive drag-n-drop sort. In fact, the only functionality I need is dragging, dropping, and re-ording of the list elements. So to begin I modified my mouseDown event to record the initial “index” of the list element target. My list elements have a “sort-id” attribute (id goes from 0 to n) pulled from the database, which I access like so:

I then modified my handleMove event to set a z-index for the dragged element to 100, and the color to white.

The most complicated code in the project is the handling of vertical movement. Let’s break it down. So to start, I get the vertical distance moved by the cursor divided by the height of each element. I then calculate the nextIndex of the element by subtracting the (vertical distance / ITEM_HEIGHT) from the initial element index. So if my height is 40, and I move 80, I know to move 2 indexes up. I then check to make sure we don’t hit 0 or a number out of bounds, and set the elements css to follow the cursor on the Y axis. Finally, I have a “currIndex” variable that I update whenever the index of the dragged element changes. If the nextIndex is different from the currIndex, I detach the li and place it in the list where it belongs.

Finally, we just need to update our mouseUp event. I check if we have been moving vertical, and if so set the z-index back to one, set the location to its natural place within the list, and then loop through all the lists children, setting the sort-id with the updated index value.

(I will soon add an AJAX call to save the new sort locations to the database.)

And voila! Sorting is handled!

Conclusion

Both user interactions are working perfectly and it was a bit easier than I thought it would be to make the functionality on my own. I also learned a lot while creating this, which just isn’t the case through the use of libraries.

Sometimes it’s nice and easy to use magic libraries and frameworks, but the best feeling in programming is when you create the magic yourself and satisfy your natural instincts to be a pioneer.

Until next time!

Dean Watts

Written by

Software Developer in Manhattan. Passion to learn and teach about the power of programming.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade