How do we do dual sortable lists properly?
I've been having fun trying to make a simple UI for choosing from a list of options (in this case, table columns to use as input for a vega-lite plot) by dragging from the first list to a second list. Being able to sort the second list is a nice touch too. Sorting the first list is unimportant and indeed I'd prefer to prevent it.
With no prior knowledge of JQueryUI, it was a bit of an adventure. One of the problems is that all the examples I can find only do part of the job; they beautifully show making a pair of lists, connecting them, the nice drag/drop - but things don't work so well for updating the two lists involved. The #onStop: event script gets a callback that updates the list from which an item has been dragged (because that counts as a sort?) but the list that got the new item does not get its #onStop: triggered (because a drop doesn't count as a sort?)
I did discover the #onReceive: etc methods and this adds a little more confusion.
After some playing around with it I was lead to the use of #aCanvas jQuery this load callbackSortable: and a block that extracts the moved item, adds it to the recipient list and so on. That also appears to require an #html: to redraw the list items. It works OK but seemed a bit verbose.
However, whilst trying to make a decent example to offer as an addition to the jQuery UI Functional Test Suite I discovered that simply using the same code in an #onReceive: as was already working in the #onStop: was effective; no need for the extra #html: That is a bit of an improvement in the look of the code but still doubles up some stuff. Just whilst typing this, I also noticed the #onUpdate: option and that does actually appear to be triggered sensibly. This makes a lot more sense than #onStop: etc!
So, question for the gallery - is #onUpdate: the 'proper' thing to do? If not, what is?
Offered example, for what it's worth -
tim
--
tim Rowledge; tim(a)rowledge.org; http://www.rowledge.org/tim
Florida: more red in the face
