[Seaside] how to make a list of items that can be rearranged via drag and drop or buttons

[Louis LaBrunda]

Hi Esteban,

Thank you very much, I will give it a try.

Lou


On Tue, 14 Jul 2020 17:28:23 -0300, Esteban Maringolo <emaringolo at gmail.com> wrote:

>Hi Louis,
>
>I use jQuery UI sortable() [1] for this. You need to add the
>JQUiDeploymentLibrary library to your application (or link the to the
>files).
>
>MyComponent>>renderContentOn: html
>
>html div
>"snip"
> script: (self createSortableOn: html)
>"snip"
>
>MyComponent>>createSortableOn: html
>
>^(((html jQuery id: self elementId)
>  find: '.' , self containerCssClass , ':first') sortable)
>  placeholder: 'placeholder';
>  handle: '.sort-handle';
>  onStart: ((JSStream on: 'ui.placeholder.height(ui.item.height());')
>asFunction: #('e' 'ui'));
>  onUpdate: (self createSortableUpdateScriptOn: html);
>  yourself
>
>
>MyComponent>>createSortableUpdateScriptOn: html
>^html jQuery post
>  callback: [:v | self reorderChildrenWithSequence: (v subStrings:
>',')] value: (((html jQuery id: self elementId)
>  find: '.' , self containerCssClass, ':first') call: 'sortable' with:
>'toArray')
>
>Each sortable DOM element has an id attribute that is what the
>sortable("toArray") uses to get the id of each (it is also
>configurable), then with that collection of IDs look for them in my
>model:
>
>reorderChildrenWithSequence: anOrderedCollection
>  self children: (anOrderedCollection collect: [:each | self children
>detect: [:one | one elementId = each]]).
>  self model children: (self children collect: [:each | each model])
>
>Also I use a placeholder while the dragging begins, you can remove the
>onStart: part if you're not interested in it.
>
>I hope this helps you get started.
>
>Best regards,
>
>[1] https://jqueryui.com/sortable/
>
>ps: My case is a little more complicated as I can sort at arbitrary
>depth (but only within the same level of depth), but it's a single
>component that recursively builds a tree of components.
>You can replace the ((html jQuery id: self elementId) find: '.' , self
>containerCssClass , ':first') by your jQuery instance.
>
>
>Esteban A. Maringolo
>
>
>
>On Tue, Jul 14, 2020 at 4:50 PM Louis LaBrunda
><Lou at keystone-software.com> wrote:
>>
>> Hi All,
>>
>> Can anyone please give me an example of how to make a list of items that can be rearranged via drag and drop or buttons
>> and the new order retrieved?
>>
>> Lou
>> --
>> Louis LaBrunda
>> Keystone Software Corp.
>> SkypeMe callto://PhotonDemon
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>_______________________________________________
>seaside mailing list
>seaside at lists.squeakfoundation.org
>http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- 
Louis LaBrunda
Keystone Software Corp.
SkypeMe callto://PhotonDemon