Hi,
I'm trying to use MochiKit.Sortable in an online voting system. Votes
are counted in a single transferable vote system, where voters order
some or all of the available candidates in their order of preference.
I've been able to display two lists, one (initially empty), of voters
that have been selected, and another (initially containing all the
candidates), of unselected candidates. Voters can vote by dragging the
candidates from the unselected column to the vote column. This is
pretty sweet :-)
What I'd like to do now is to make it possible to enter your votes by
choosing a number in a select element inside the list item. When a
number is chosen, I'd like the item to move into the other column and
into the right position automagically. I believe that this system will
be more accessible to e.g. the visually impared, people who can't use a
mouse, people with Javascript disabled etc, and it allows me to submit
the form normally, rather than using JS.
How would one go about manipulating Sortables in this way? I've found
the undocumented setSequence function, but I can't make it do anything
useful.
Here's what I'd like:
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ballot Paper</title>
<script type="text/javascript">
MochiKit = {__export__: false};
</script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/MochiKit.js"></script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/New.js"></script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/Visual.js"></script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/Signal.js"></script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/DragAndDrop.js"></script>
<script type="text/javascript"
src="file:///home/psr/soft/mochikit/MochiKit/Sortable.js"></script>
</head>
<body>
<h1>Ballot Paper</h1>
<form class="election">
<h2 class="election_name">God Emperor of the Universe</h2>
Drag votes here:
<ul id="votes" style="min-height:100px;">
</ul>
<hr />
<ul id="available">
<li id="andy-item"><label for="andy">Andy Kilner :</label>
<select name="andy">
<option selected value="0">Not selected</option>
<optiongroup label="Votes">
<option value="1">1 (Most prefered candidate)</option>
<option value="2">2</option>
<option value="3">3</option>
</optiongroup>
</select>
</li>
<!-- etc. -->
</ul>
</form>
<script type="text/javascript">
votesReordered = function(sortable) {
// I need code to get the order of the list items here
};
availableReordered = function(sortable) {
// I need code to get the order of the list items here
};
MochiKit.Sortable.Sortable.create('votes',
{dropOnEmpty:true,
containment:["votes",
"available"],
constraint:false,
onUpdate:votesReordered});
MochiKit.Sortable.Sortable.create('available',
{dropOnEmpty:true,
containment:["votes",
"available"],
constraint:false,
onUpdate:availableReordered});
MochiKit.Signal.connect('andy', 'onchange', //Need a function to move
the item
);
</script>
</body>
</html>
Thanks
--
Peter Russell <[EMAIL PROTECTED]>
Qustom
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
