Voting System – Dojo DnD

I am writing a django app that requires a preferential voting system. Preferential voting systems on the web are kind of difficult, because you have so many candidates and the voters like to change their mind. What I came up with for a solution is to use Dojo's DnD, which will be used with AJAJ later on.

I am providing you with the Dojo code I wrote to help this great toolkit get the attention it deserves (I have been noticing some javascript DnD queries in my blog stats).

Here are some screenshots of what it does (I would have put it online, but I don't want to pay for hosting just yet):
pre-drag:

drag:

post-drag:

And here is the code:

vote.html
VoteDragAndDrop.js
vote.css

Note: those files have .txt extensions because wordpress.com won't allow me to upload them with their correct extensions (understandable). Also, sorry if the spacing in those files is akward. DOJO uses tabs and I'm used to spaces for tabs.

Small Dojo DnD Change – Gap Problem

I haven't submitted a blog entry in a while, and it's because I've been busy watching the Phoenix Suns dominate the Lakers. To get back into the groove of things (until Round 2 of the playoffs), I have decided to post this little dnd fix (if it can be called that, as it might not work for your particular setup).

This code should override/replace the _getNodeUnderMouse function in HtmlDragAndDrop.js, which will fix the drop indicator from jumping around when you mouse over a gap inbetween two nodes in the drop target. So…if you're having that problem, here's a potential solution. If you're not having that problem, then obviously, this is not for you.

_getNodeUnderMouse: function(e){
	// find the child
	var dcTop = dojo.style.getAbsoluteY(this.domNode, true); // get drop target coordinates
	for (var i = 0, child; i < this.childBoxes.length; i++) {
		with (this.childBoxes[i]) {
			if (node.offsetTop > ((e.pageY - dcTop) + 2)) { return i; }
		}
	}
	return -1;
},

Dojo Day 2 – Finished minus the Ajax

Dojo is so nice and easy. I finished what I thought was going to be a very difficult drag and drop task today. It doesn't work in IE, though, so I need to check into that. My next step is to integrate it with the django app I'm going to start working on tomorrow — and I'm excited about django's m-r merge into the main trunk. Getting dojo to work with django should be interesting, but not too difficult as some work has already been done with this. Getting dojo to work with ajax and django should be more difficult. Moreover, I think I'll be using JSON instead of XML (no standard, no foul).

Dojo Day 1

Ok, I downloaded the HEAD yesterday and have concluded that Dojo's great. It did not take me long to get coding — and I reached my goal for that day. It was quick (but a little ugly, mainly due to JavaScript's OO implementation) to inherit and override what was necessary.

I found the documentation to be weak and the examples to be very sparse, but there's so much code in the dojo source that it provided me with just enough to get me at my goal.

Do I pick Dojo?

I am in need of Ajax and DnD for my latest Django project (which has not yet been implemented — only laid out), thus I am in need of a JavaScript toolkit to assist me. I looked at scriptalicious (prototype), Yahoo's Design Pattern Library (though, only briefly), and Dojo. I chose Dojo. But it was not an easy decision. The main reasons: their packaging system and Django's decision to back them. But, the biggest thing that was driving me away was their lack of examples and documentation.

This should be an interesting ride. Here's what one of the main Dojo Developers, Alex Russell, has to say about Dojo:

The main argument presented against Dojo here is that we're not driven by the design community, and it's true. We are trying to provide a solid engineering foundation for you to build on. We excel in giving good designers good tools, not in imposing our sensibility onto your projects.

Influential reads:
dojo.io.bind(): baking usability into XMLHTTP
Why I Don't Use The prototype.js JavaScript Library