[Seaside-dev] Using dual sortable lists to drag choices from one list to the other

[Max Leske]

Hi Tim

I've never used jQuery for drag and drop or sorting, so I don't know from experience. Let's see if somebody else knows more before I dive down the rabbit hole.


Cheers,
Max

On 22 Sep 2021, at 1:25, tim Rowledge wrote:

> 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 at rowledge.org; http://www.rowledge.org/tim
> Florida: more red in the face
>
>
> _______________________________________________
> seaside-dev mailing list
> seaside-dev at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 833 bytes
Desc: OpenPGP digital signature
URL: <http://lists.squeakfoundation.org/pipermail/seaside-dev/attachments/20210922/772477fe/attachment.sig>